Positioning Elements Side-By-Side with Inline Display

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