Joel Olawanle

The CSS overflow-clip-margin property determines how far the overflow of an element can go beyond the element’s box before being clipped. This area is called the overflow clip edge.

.element {
  height: 100px;
  overflow: clip; /* required */
  overflow-clip-margin: 

The scale property in CSS resizes an element’s width and height in proportion. So, if we have an element that’s 100 pixels square, scaling it up by a value of 2 doubles the dimensions to 200 pixels square. Similarly, a …

The translate CSS property allows you to transfer an element from one place to another along the X (horizontal) axis, the Y (vertical) axis, and the Z (depth) axes, similar to how you might think of moving an element using …

The rotate property in CSS turns an element around one or more axes. Think of it like poking one or more pins into an element and spinning the element around those points in clockwise and counter-clockwise directions measured in degree, …

padding-block is a CSS logical shorthand property that combines the padding-block-start and padding-block-end properties into a single declaration, creating space around an element’s content in the block (top and bottom) direction.

.element {
  padding-block: 30px 60px;
  writing-mode: vertical-rl; /* Determines 

padding-inline is a CSS logical shorthand property that combines the padding-inline-start and padding-inline-end properties into a single declaration, creating space around an element’s content in the inline (left and right) direction.

.element {
  padding-inline: 30px 60px;
  writing-mode: vertical-rl; /* Determines 

border-block is a CSS logical shorthand property that combines border-block-color, border-block-style, and border-block-width into a single declaration.

.element {
  border-block: 5px solid red;
  writing-mode: horizontal-tb;
}

border-block is the logical equivalent to physical properties including border-top and border-bottom…

border-inline is a CSS logical shorthand property that combines border-inline-color, border-inline-style, and border-inline-width into a single declaration, styling an element’s borders in the inline (left and right) direction.

.element {
  border-inline: 5px solid red;
  writing-mode: horizontal-tb;
}

border-inline…

block-size is a CSS logical property that defines the height of an element when the writing-mode is horizontal, or the width of the element when the writing-mode is vertical.

.element {
  block-size: 700px;
  writing-mode: vertical-lr;
}

block-size is defined in …

The text-emphasis property in CSS, as the name implies, is used to emphasize text in CSS. It does it by applying special marks to an element’s text.

.element {
  text-emphasis: circle red;
}

You might think of text emphasis as …