Articles by

Joel Olawanle

Frontend Developer and Technical writer.

Direct link to the article padding-block

padding-block

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 
(Updated on )
Direct link to the article padding-inline

padding-inline

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 (top and bottom) direction.

.element {
  padding-inline: 30px 60px;
  writing-mode: vertical-rl; /* Determines 
Direct link to the article border-block

border-block

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

(Updated on )
Direct link to the article border-inline

border-inline

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

(Updated on )

text-emphasis

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 …