3. CSS Properties – Part 1

Key Terms

• CSS Display Property
• Inline
• Inline-block
• Block
• Flexbox
• Flow-Root
• Grid
• Table Values
• CSS Positions
• Helper Properties
• z-index
• position: static
• position: relative
• position: absolute
• position: fixed
• position: sticky
• CSS Float
• float: left
• float: right
• clear

CSS Display property

Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves. There are only a handful of values that are commonly used:

The default value for all elements is inline. Most “User Agent stylesheets” (the default styles the browser applies to all sites) reset many elements to block. Let’s first go through the important ones and then we will cover some of the other less common values.

Inline

inline is the default value for elements. Think of elements such as <span>, <em>, or <b> and how wrapping text in those elements within a string of text doesn’t break the flow of the text. Here is an example:

The <em> element has a 1px red border. Notice how it sits inline with the rest of the text?

An inline element will accept Margin and Padding, but the element still sits inline as you might expect. Margin and Padding will only push other elements horizontally away, not vertically. This is an example of what an inline element looks like after Margin and Padding are applied to it:

Also note that an inline element will not accept Height and Width properties. If present, the browser will simply ignore them.

Inline-block

An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the “baseline”). The difference is that you are able to set a width and height which will be respected in this case. Here is an example of what an inline-block with width and height looks like:

Block

A number of elements are set to block by the browser’s UA stylesheet. They are usually container elements, such as <div>, <section>, and <ul>. This also includes text blocks such as <p> and <h1>. block level elements do not sit inline but break past them. By default (without setting a width), they take up as much horizontal space as they can. Here is an example:

The two elements with the red borders are <p>s which are block level elements. The <em> element in between them doesn’t sit inline because the blocks break down below inline elements.

Flexbox

In recent years, there have been additional display properties introduced to CSS that are used for new fangled layout methods. One such method is the flexbox. Here is the CSS syntax for calling the flexbox method:

There are some older versions of flexbox syntax, please check out this article for the syntax when using flexbox with the best browser support. Be sure to also take a look at this article for a complete guide to using flexbox.

Flow-Root

The flow-root display value creates a new “block formatting context”, or BFC, but is otherwise like block. A new BFC helps with objectives such as clearing floats, removing the need for hacks to do that. Here is the CSS syntax:

Grid

Another one of the new fangled layout methods is the grid layout. Similar to flexbox, it is also initially set by the display property:

Here’s a complete guide on the grid layout, which includes a browser support chart.

None

A display: none totally removes the element from the page. Note that while the element is still in the DOM, it is removed visually and in any other conceivable way (you can’t tab to it or its children, it is also ignored by screen readers, etc).

Table Values

There is a whole set of display values that force non-table elements to behave like table-elements, if you need that to happen. while it’s rare that they are used in practice, they allow you to be “more semantic” with your code while utilizing the unique positioning powers of tables. Here is a list of all the possible Table Values:

The most commonly used table structure values are:

• <div style="display: table;"></div>
• <div style="display: table-row;"></div>
• <div style="display: table-cell;"></div>

Although these are not commonly used, it is nonetheless good to be aware of their use cases by checking out the examples in this article.

In this video, we break down all the different display property values you need to know and show you exactly how they work.

Source: Web Dev Simplified