Welcome back.

Coming up in this section of the course,

we'll take a close look at how to control your elements in your layout using common

CSS display modes like block in-line and in-line block.

Understanding the difference between block, in-line and

in-line block display setting will help take your CSS layouts to the next level.

And it will help save a lot of time and maybe a little frustration

when using common properties like width, height, padding and margins.

In the CSS basics course you learned that every element on a webpage

is a rectangular box that's displayed as either a block level element or

an in-line element.

Block level elements, like divs, paragraphs,

and headings, stack on top of each other, like a stack of blocks,

instead of appearing side by side each other on the same line.

A browser normally displays a block level element as a single block of content

with a break before and after it.

In-line 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.

A feature of CSS is the ability to change the default behavior of elements.

In this video I'll show you 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.

First, I'll start with a simple layout example.

I'm gonna show you how to position elements side by side

starting with inline display to create this horizontal navigation.

To follow along using the latest workspace,

launch the workspace on this page.

So when I preview my latest workspace, you can see that currently

the elements in the header are formated visually as blocks by default.

Because the h1, unordered list, and list items, are all block level element items.

They naturally expand to fill their parent container div in the header.

So they each take up an entire line in the layout, and

no other elements can be positioned on their left, or right sides.

That's why they appear stacked but

we can manipulate this layout by changing their display modes.

In this CSS I applied a white background color to the name and

main nav list item so

you can see exactly how the different display modes affect their layout.

So I want to keep the site name and

navigation on a single column in small screens and mobile devices.

As you learned earlier, it's usually best to display mobile layouts as

one column layouts because of the narrow screen width on a mobile device.

So I'm gonna change the layout of the site name and navigation in large screens only.

And one of the easiest ways I can create a horizontal navigation

is by changing the display properties of these elements from block to inline.

Int the style sheets media query, I'll create a new rule that targets

the name element and list items inside main nav.

In the rule, I'll add a display property and set the value to inline.

When we save and preview it in the browser,

you'll see that the site name no longer takes up an entire line on the page.

It's now as white as its content, and

the navigation items also display side by side on the same line.

But the navigation still displays below the site name.

To place the navigation on the same line as the name element,

I also need to set the display mode of the main nav on ordered list to In-line.

If I inspect the main nav element with the div tools, you can that even though

the list items display is set to in line the main nav UL is a block level element.

So it's still taking up an entire line in the layout.

That's why it's dropping below the name element.

Back in my style sheet,

if I target the class main-nav to set its display to inline,

when I refresh the page the name and navigation items appear on the same line.

Great, it's important to know that, when it comes to margins and

padding, browsers treat inline elements differently.

When an element's display is set to in-line like the items here in the header.

The browser will not apply any height and width properties.

Or top and bottom margin settings.

An inline element will only accept left and right margins and any padding value.

So for example back in media query,

I'll create a new rule that targets the class name.

Then I'll give it a width of 240 pixels and a top and bottom margin of 50 pixels.

So back in the browser, even though I've applied a width and a top and

bottom margin to the name element.

When I refresh the page, you can see that nothing in the layout changes.

And the same will happen if I give the navigation list items a width or top and

bottom margins because they're also displayed in-line.

But if I give the name element a right margin value so

I'll say margin, right, 50 pixels.

When I take a look at it again,

notice how it pushes the main navigation away 50 pixels.

So inline elements naturally flow next to each other, just like text in a paragraph.

So any margin and padding values will only

push surrounding elements away horizontally, like you're seeing here.

They never push them away vertically.

So for example,

I wanna expand the clickable areas in my header links, using padding.

In the base layout styles outside the media query, I'm going to

create a new rule that targets the links inside the name and main nav elements.

Links are inline elements by default so if I try to use padding to

expand them with a top and bottom padding value of ten and a left and

right padding value of 15 pixels, when we refresh the browser.

Notice how the padding doesnt make the link any taller.

Just 15 pixels wider on the left and right sides.

In line elements only take on the left and

right padding values applied not the top and bottom values.

Also when I resize the viewport notice how the navigation items begin to wrap into

the next line below the name as its container space gets narrower.

This is the natural behavior of inline elements.

And it's what I meant earlier when I said that inline elements

naturally flow next to each other, just like text in a paragraph.

You'll learn how to adjust both the padding and the links and the wrapping of

the nav items in the next lesson using the inline block display value.