This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
Positioning Elements Side-By-Side with Inline Display7:29 with Guil Hernandez
In this video, you'll learn how changing element display values from block to inline affects surrounding elements and the space they take up on a page. For instance, you can make list items, which normally appear stacked on top of each other, appear side by side to form a navigation bar.
- Inline elements, like images, links and span tags, do not create line breaks in a layout; they appear on the same line as the content and elements beside them.
- Block-level elements, like divs, paragraphs and headings, stack on top of each other and expand to fill their parent.
- The browser does not apply width and height properties, or top and bottom margin settings to inline elements.
- An inline element will only accept left/right margins and any padding value.
You need to sign up for Treehouse in order to download course files.Sign up