Page 194 - CSS

Examples

The display property

The display CSS property is fundamental for controlling the layout and flow of an HTML document.
Most elements have a default display value of either block or inline (though some elements have
other default values).

Inline

An inline element occupies only as much width as necessary. It stacks horizontally with other
elements of the same type and may not contain other non-inline elements.

<span>This is some <b>bolded</b> text!</span>

As demonstrated above, two inline elements, <span> and <b>, are in-line (hence the name) and do
not break the flow of the text.

Block

A block element occupies the maximum available width of its' parent element. It starts with a new
line and, in contrast to inline elements, it does not restrict the type of elements it may contain.

<div>Hello world!</div><div>This is an example!</div>

The div element is block-level by default, and as shown above, the two block elements are
vertically stacked and, unlike the inline elements, the flow of the text breaks.

Inline Block

The inline-block value gives us the best of both worlds: it blends the element in with the flow of
the text while allowing us to use padding, margin, height and similar properties which have no visible
effect on inline elements.

Elements with this display value act as if they were regular text and as a result are affected by
rules controlling the flow of text such as text-align. By default they are also shrunk to the the
smallest size possible to accommodate their content.

https://riptutorial.com/ 172