Join Morten Rand-Hendriksen for an in-depth discussion in this video Understanding the display porperty, part of Making Sense of the CSS Box Model.
- [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 adjacent text. … The box is literally in line with the other content. …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes