From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

The display property

The display property - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

The display property

“

- [Instructor] To make layout changes, many methods, but all, use the display property. The block, inline, and inline-block values change the default display behaviors of elements in the normal flow. display is also used to initiate the Grid and Flexbox layouts, which we'll discuss in more detail later on in this course. Let's open an exercise and test out the different display values. Right now, the elements that I'm using, the section, div, and span, do not have any default margin or padding styles. Let's just add in some background colors to make it easier to see the boundaries of each element. We can also add in the height and width elements, but remember, by default, inline elements will ignore the height and width values. So let's add display with a value of block, first to the inline elements. Now, it will display just like a block element. The height and width is applied, and the elements are stacked. Now,…

Contents