This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
Resources
Video review
- 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.
Welcome back.
0:04
Coming up in this section of the course,
0:06
we'll take a close look at how to control
your elements in your layout using common
0:07
CSS display modes like block in-line and
in-line block.
0:11
Understanding the difference
between block, in-line and
0:16
in-line block display setting will help
take your CSS layouts to the next level.
0:19
And it will help save a lot of time and
maybe a little frustration
0:23
when using common properties like width,
height, padding and margins.
0:27
In the CSS basics course you learned
that every element on a webpage
0:31
is a rectangular box that's displayed
as either a block level element or
0:35
an in-line element.
0:40
Block level elements,
like divs, paragraphs,
0:42
and headings, stack on top of each other,
like a stack of blocks,
0:44
instead of appearing side by side
each other on the same line.
0:48
A browser normally displays a block level
element as a single block of content
0:51
with a break before and after it.
0:56
In-line elements like images, links, and
0:59
span tags do not create
line breaks in a layout.
1:01
They appear on the same line as
the content and elements beside them.
1:05
A feature of CSS is the ability to
change the default behavior of elements.
1:08
In this video I'll show you how changing
element display values from block to
1:14
inline affects surrounding elements and
the space they take up on a page.
1:18
For instance, you can make list items
which normally appear stacked on
1:23
top of each other appear side by
side to form a navigation bar.
1:27
First, I'll start with
a simple layout example.
1:32
I'm gonna show you how to
position elements side by side
1:35
starting with inline display to
create this horizontal navigation.
1:38
To follow along using
the latest workspace,
1:42
launch the workspace on this page.
1:45
So when I preview my latest workspace,
you can see that currently
1:47
the elements in the header are formated
visually as blocks by default.
1:51
Because the h1, unordered list, and list
items, are all block level element items.
1:56
They naturally expand to fill their
parent container div in the header.
2:02
So they each take up an entire
line in the layout, and
2:07
no other elements can be positioned
on their left, or right sides.
2:10
That's why they appear stacked but
2:15
we can manipulate this layout
by changing their display modes.
2:16
In this CSS I applied a white
background color to the name and
2:21
main nav list item so
2:26
you can see exactly how the different
display modes affect their layout.
2:28
So I want to keep the site name and
2:33
navigation on a single column in
small screens and mobile devices.
2:35
As you learned earlier, it's usually
best to display mobile layouts as
2:40
one column layouts because of the narrow
screen width on a mobile device.
2:44
So I'm gonna change the layout of the site
name and navigation in large screens only.
2:48
And one of the easiest ways I can
create a horizontal navigation
2:53
is by changing the display properties
of these elements from block to inline.
2:57
Int the style sheets media query,
I'll create a new rule that targets
3:02
the name element and
list items inside main nav.
3:07
In the rule, I'll add a display
property and set the value to inline.
3:20
When we save and
preview it in the browser,
3:26
you'll see that the site name no longer
takes up an entire line on the page.
3:29
It's now as white as its content, and
3:34
the navigation items also display
side by side on the same line.
3:36
But the navigation still
displays below the site name.
3:41
To place the navigation on
the same line as the name element,
3:46
I also need to set the display mode of
the main nav on ordered list to In-line.
3:51
If I inspect the main nav element with
the div tools, you can that even though
3:57
the list items display is set to in line
the main nav UL is a block level element.
4:02
So it's still taking up
an entire line in the layout.
4:09
That's why it's dropping
below the name element.
4:12
Back in my style sheet,
4:17
if I target the class main-nav
to set its display to inline,
4:19
when I refresh the page the name and
navigation items appear on the same line.
4:23
Great, it's important to know that,
when it comes to margins and
4:29
padding, browsers treat
inline elements differently.
4:33
When an element's display is set to
in-line like the items here in the header.
4:37
The browser will not apply any height and
width properties.
4:42
Or top and bottom margin settings.
4:46
An inline element will only accept left
and right margins and any padding value.
4:48
So for example back in media query,
4:54
I'll create a new rule that
targets the class name.
4:58
Then I'll give it a width of 240 pixels
and a top and bottom margin of 50 pixels.
5:01
So back in the browser, even though
I've applied a width and a top and
5:11
bottom margin to the name element.
5:15
When I refresh the page, you can see
that nothing in the layout changes.
5:18
And the same will happen if I give the
navigation list items a width or top and
5:22
bottom margins because they're
also displayed in-line.
5:27
But if I give the name element
a right margin value so
5:32
I'll say margin, right, 50 pixels.
5:37
When I take a look at it again,
5:42
notice how it pushes the main
navigation away 50 pixels.
5:43
So inline elements naturally flow next to
each other, just like text in a paragraph.
5:48
So any margin and padding values will only
5:54
push surrounding elements away
horizontally, like you're seeing here.
5:57
They never push them away vertically.
6:02
So for example,
6:04
I wanna expand the clickable areas
in my header links, using padding.
6:05
In the base layout styles outside
the media query, I'm going to
6:12
create a new rule that targets the links
inside the name and main nav elements.
6:17
Links are inline elements by default so
if I try to use padding to
6:29
expand them with a top and
bottom padding value of ten and a left and
6:34
right padding value of 15 pixels,
when we refresh the browser.
6:38
Notice how the padding doesnt
make the link any taller.
6:44
Just 15 pixels wider on the left and
right sides.
6:47
In line elements only take on the left and
6:52
right padding values applied
not the top and bottom values.
6:55
Also when I resize the viewport notice how
the navigation items begin to wrap into
6:59
the next line below the name as
its container space gets narrower.
7:04
This is the natural behavior
of inline elements.
7:09
And it's what I meant earlier
when I said that inline elements
7:12
naturally flow next to each other,
just like text in a paragraph.
7:15
You'll learn how to adjust both the
padding and the links and the wrapping of
7:20
the nav items in the next lesson
using the inline block display value.
7:24
You need to sign up for Treehouse in order to download course files.
Sign up