02. Display

To control how elements flow within our content, we use the display property.

The possible values include: inline, block, andinline-block.

Inline

A value of inline makes the element displayed within the flow of a line.

Some examples of inline-block elements that you may have seen are <span>, <em>, and <markup>

Remember that these elements do not start their own block, but rather situate themselves with the flow of the surrounding content.

Block

When the display is set to block, the element is positioned with line breaks under and over it. Some of the default block elements in HTML include: <h1> and <p> tags.

Inline-block

In case you wanted a hybrid of both, we can specify, inline-block level elements. Here, the element will flow like an inline-element, but are able to have a specified height.

None

Using a value of none takes that element completely out of the page. This is useful for switching the visibility of an element on and off.

display: none vs. visibility: hidden

There is another CSS property similar to display: none called visibility: hidden that can also hide elements.

The difference is that display: none takes the element box completely out of play, while visibility: hidden keeps the box and flows it in place without the contents being visible.

If you don't want a blank space to appear, use display: none.

Build modern and responsive webpages

Responsive Typography

Build modern and responsive webpages Try Front-end

Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography? With this practical book, graphic designers, web designers, and front-end developers alike will learn the nuts and bolts of how to get the best appearance from type without sacrificing performance on any device.

$ Check price
24.9924.99Amazon 4.5 logo(3+ reviews)

More Front-end resources

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources

Ad