Display properties: block, inline, and inline-block.

Web browsers treat every element as a kind of box. However, CSS has two different types of boxes — block and inline.

A block element always starts on a new line, and fills up the horizontal space left and right on the web page. You can add margins and padding on all four sides of any block element — top, right, left, and bottom.

Block

block elements are <div> and <p> tags. As shown below, I’ve also added green padding on all four sides of each block element.

Inline

Inline elements don’t start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are <span> , <strong>, and <img> tags.

When it comes to margins and padding, browsers treat inline elements differently. You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element.

Inline elements can actually appear within block elements.

Inline-block

Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides. You’ll have to declare display: inline-block in your CSS code.

One common use for using inline-block is for creating navigation links horizontally

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top