Introduction
In the previous lesson, we discovered that different display types have unique box models, and we can modify the box calculation by changing the box-sizing property. CSS has two box types: block and inline boxes, which determine element behavior and interaction. The display property controls how HTML elements appear on the webpage. We will explore its various options further in this lesson.
Lesson overview
This section contains a general overview of topics that you will learn in this lesson.
- You’ll learn about “Normal flow”.
- You’ll learn the difference between
blockandinlineelements. - You’ll learn which elements default to
blockand which elements default toinline. - You’ll learn what divs and spans are.
Block vs inline
Most of the elements that you have learned about so far are block elements. In other words, their default style is display: block. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or <a> tag. If you stick one of these in the middle of a paragraph of text, the link will behave like a part of the paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
The middle ground inline-block
Inline-block elements behave like inline elements, but with block-style padding and margin. display: inline-block is a useful tool to know about, but in practice, you’ll probably end up reaching for flexbox more often if you’re trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
Divs and spans
When building a web page, not every piece of content has a specific semantic tag. Sometimes, you just need a container you can style or position! That’s where div and span come in.
A div is a generic block-level container. It behaves like a rectangular section that, by default, stretches across the full width of its parent and starts on a new line. Typically, you would use a div to group related elements inside page components, such as grouping cards, sections, sidebars, or navigation bars.
In this case, when you wrap content in a div and give it a class or id, you create a convenient hook for CSS layout and styling!
See the Pen block-inline-lesson-div-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.
A span is a generic inline container. It sits inside a line of text and only takes up as much space as its content. Unlike div, it does not start on a new line. You use span when you want to style or target just part of a sentence. For example, when you want to highlight a single word or attach a tooltip to a phrase, you can wrap it in a span then add a class or id so CSS can find and manipulate it.
See the Pen block-inline-lesson-span-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.
Neither div nor span adds meaning to the content the way semantic tags do, as they exist to give you flexible “building blocks”. The key difference is how they behave in the layout: div participates in the flow as a block-level element, while span behaves as an inline element. Once you understand that, choosing between them becomes simple! You can use div when you’re grouping and positioning bigger blocks of content, and span when you’re styling or scripting small pieces inside a line.
Assignment
- The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read “Normal Flow” from MDN to make sure you understand how elements lay themselves out by default.
- W3 schools’ “HTML Block and Inline Elements” has a description and a list of all the default block and inline elements.
- The Digital Ocean tutorial “Inline vs Inline-block Display in CSS” has a couple of great examples that clarify the difference between
inlineandinline-block. - Do the exercises in our CSS exercises repository’s
foundations/block-and-inlinedirectory (remember that the instructions are in the README) in the order:01-margin-and-padding-102-margin-and-padding-2
Note: Solutions for these exercises can be found in the
solutionfolder of each exercise. - Remember the Recipe page you created as practice from the HTML Foundations section? Well, it’s rather plain looking, isn’t it? Let’s fix that by adding some CSS to it!
- How you actually style it is completely open, but you should use the external CSS method (for this practice and moving forward). You should also try to use several of the properties mentioned in the previous lesson (color, background color, typography properties, etc). Take some time to play around with the various properties to get a feel for what they do. For now, don’t worry at all about making it look good. This is just to practice and get used to writing CSS, not to make something to show off on your resume.
- We haven’t covered how to use a custom font for the
font-familyproperty yet, so for now take a look at CSS Fonts for a list of generic font families to use, and CSS Web Safe Fonts for a list of fonts that are web safe. Web safe means that these are fonts that are installed on basically every computer or device (but be sure to still include a generic font family as a fallback).
Knowledge check
The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.