CSS Basics: The Display Property

One of the first important things I learned in CSS was the display property. The display property is a vital tool to make the layout of your website look the way you want it to. I’ll look at some of the most basic values for the display property.

I’ll be looking at the three big values for the display property: block, inline, and inline-block. Every element in HTML has a default display value. You can see what some of them are here. Some common tags that you might use, like <h1>, <p>, <div>, <header>, <article>, or <ul>, use the block value as their default display value. You may notice that all of those elements take up the full width of the container they’re in and start on a new line. Even if you change the width of any of these elements they’ll still take up the entire line. So if you wanted <p> tags to be all on the same line next to one another you’d have to change the display from its default value of block to something else.

Other elements you may notice can be placed side-by-side, and these include the <span>, <img>, and <a>. These are inline by default. You can place these on the same line. If you want these elements to take up the full width of your line then you can change their default display value to something else. So right off the bat you may notice the two differences between these display values. The other difference between block and inline is that block elements can have their width and height set, while inline elements cannot since they will always only take up as much space as needed.

Then we have the final value which is a combination of the two other values, inline-block. The inline-block value makes the element be inline but you can set the width and height of the element.

That’s the basics for the display property. I’ll look into more values next time. You can see here that there are tons of values!