CSS Display

By default, each CSS property has its certain type of display in a page layout. For example, <div>, <h1> to <h6>, <p>, <form>, <header>, <footer>, and <section> by default behave like block-level elements. This means they block the entire width available, with a line break before and after the element. In other words, block-level elements don't welcome any "neighbors" in the same area with them. 

To set the block display for elements with other default values, you should use the display property with the block value.

Inline-level elements are modest "guests": they take only as much space as they need and don't force a line break. Inline elements flow horizontally, and in contrast to block-level elements, you can't adjust their width and height. Typical inline elements are <span>, <a>, <img>, etc.

To make elements behave like they are inline, you need to specify the inline value of the display property.

The display property with the none value makes sure the element doesn't create any boxes. When do we need this behavior? Web developers often use this property value for hiding and showing elements without deleting and reconstructing them.

Like how our parents' behavior impacts our habits and beliefs, the none value of a father element affects its children. Child elements don't form any boxes either, even if their display property is something different than none. The element has a none value by default.

The display: none; declaration is often used for hiding/showing elements without deleting and recreating them. But doesn't the visibility: hidden; declaration do the same? Well, it does hide an element, but the latter still takes up space and distorts the layout. In contrast, the display:none; hides the element without affecting the layout.

When arranging elements on a page, we might need to lay them out in rows or columns. For this matter, web developers swear by the flexbox tool.

The tool name explains itself as it allows you to:

• Arrange elements both vertically and horizontally inside the container
• Spread elements over the container
• Shrink elements to fit into small space
• Make all columns in a multi-column layout of the same height even if they contain a different amount of content

First, you need a parent element, like <section>, and children elements that will be laid out as flexible boxes. Then, we take a familiar display property with a special value of flex and apply it to the parent element. As a result, the <section> element becomes a flex container, and its children behave like flex items.

With one single display:flex; declaration, we have a multiple-column layout with equal-sized columns. Besides, an element with this value behaves like a block-level element, meaning no other content is allowed here.

Like the flexbox, the grid is a layout module that allows you to align elements on a page. The crucial difference between flexbox and grid is that flexbox structures the layout in only one dimension — either a row or a column. The ideal use case for the flexbox is having several items that you want to space out evenly in a container either horizontally or vertically.

When you use the grid layout, you first create a layout and then put items into rows and columns. In other words, the grid properties work to help web designers create a high-level structure of a page.

Like the flexbox, the display:grid; declaration consists of a parent element and its child elements.

Inline-block elements took the best of two worlds. On the one hand, they behave like inline elements and can appear next to each other. On the other hand, inline-block elements form a box, and you can adjust their width and height, like block-level elements. The basic CSS syntax looks like this:

{

display:inline-block;

}

The display:inline-block and display:inline-flex are quite similar declarations, but they have one distinct difference. Flex items don't behave inline — the whole container does. In turn, inline-block elements aren't flexible and don't have the same height if the amount of content is different.

The inline value of the display property is the correct answer. As a result, the list items will flow horizontally and take up as little space as possible. As the example shows, elements displayed inline can coexist with other elements on a line and don't force a line break to begin in the document flow.

The visibility:hidden; is the correct answer. This declaration doesn't adjust the layout when one element disappears. In the example, the headline is hidden, but its space is left behind it. To make the element reappear again, change its visibility status to visible.

The display:none; is correct as once the element is hidden, the layout adjusts its content. The other elements scooch and fill the extra space. In the example, the text is flush-left, taking up space where the image has been.