Intro to Layout: Pre-Work

Learning Goals

• Explain the difference between block, inline and inline-block elements
• Be able to change an element’s display property with CSS

Vocabulary

• Block A block-level element occupies the entire width of its parent element (container), thereby creating a “block.”
• Inline An inline-level element only occupies the space bounded by the tags defining the element, instead of breaking the flow of the content.
• Inline-block An inline-block level element behaves the same as an inline element, but you can set a fixed width and/or height (note: no elements are inline-block by default)

Default Block and Inline Elements

You might notice that some elements behave a little differently in a layout than others. Some elements make content stack, while others let content sit next to each other. What’s that about?

This is an important distinction:

• Block elements stack on top of each other. Each one starts and ends on its own line.
• Inline elements and inline-block elements can be used to mark up a few words inside of a block element.

Most elements are block elements by default. Some common inline tags you might see used:

• <a> is used to create links
• <em> is used to denote that you’d like to emphasize some text.
• <strong> is used to denote that this text is important.

We use <em> and <strong> to denote the semantic meaning of the content. When looking at the markup, you also notice that it’s common for inline elements to be written on the same line of code, nested inside of a parent element.

See the Pen Inline v Block Elements by Turing School (@turing-school) on CodePen.

<span> and <div>

Some think of <span> and <div> as the flavorless Jello of HTML tags:

• They don’t have any meaning in and of themselves
• They typically don’t come with any built-in styling from the browser.

There is just one important difference between the two:

• <div> is a block element.
• <span> is an inline element.

CSS Display Property

The display property allows us to change the default value of block and inline level elements. Along with block and inline, we have a few other display values to choose from. Some common ones you will see are “none”, “flex” and “grid.” We’ll learn aobut flex tomorrow!

display: inline-block;
display: inline;
display: block;
display: none;

// Element no longer exists on the page and does not take up space
display: none;

// Element exists on the page and takes up space but cannot be seen
visability: hidden

// Similar to visability, but is read by screen readers. Also useful for animation!
opacity: 0

Additional Resources

• Turing HTML Style Guide
• MDN CSS Display
• MDN Inline Elements
• MDN Block Elements
• Hiding Elements with CSS