CSS Speak: What is the Display property and how does it work?

A Beginner's Guide


What does it mean to display inline vs using inline block?

While there are many different display attributes available in CSS today, a couple of the most commonly used and most useful are the inline and inline-block attributes. Others include flex, inline-table, run-in, table, none, initial, and inherit. For now though, lets just think about the inline and inline-block. When display is set to inline, your elements will align themselves horizontally across the page similar to a "span" tag for example. When inline-block is used the element will be displayed as an inline0level block container. The inside of this block is set as a block-level box, while the element itself is formatted as an inline-level box. In layman's terms this means that the element itself will be arrangeed horizontally with respecto other elements around it, but the elements within it (its children) will be set up as block elements and arrange themselves vertically like p tags do.

For some more in-depth information on this topic visit w3 schoolsCSS Display Property.

Twitter Facebook Google+ LinkedIn Email