From the course: Making Sense of the CSS Box Model

Unlock the full course today

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

Understanding the display porperty

Understanding the display porperty - CSS Tutorial

From the course: Making Sense of the CSS Box Model

Start my 1-month free trial

Understanding the display porperty

“

- [Instructor] Every HTML element has a default display property setting. Most commonly either block, as in the case of headings, paragraphs, block quotes, lists, divs, and HTML semantic dividers, like section, nav, article, aside, header, and footer, or inline as emphasized and strongly emphasized, links, spans, code, and images. Now that we know how to manipulate the box itself, we can look at how it interacts with other adjacent boxes and this all starts with the display property. Let's look at display block and display inline first. Display block makes the box into a block level element, meaning it spans the full width of available space and that no other content will display to the left or right. When adding padding, border, and margin to block level elements, they add to the size of the box and push all other content away. Display inline makes the box into an inline element that appears on the same baseline as the…

Contents