Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you've ever used Firebug or WebKit's Web Inspector, you're probably used to visually inspecting your page to check your layout. In Dreamweaver, you can use CSS Inspect to examine the Margin, Padding and other Box model Properties of elements on your page. CSS Inspect is part of Dreamweaver's WebKit Integration, and as we'll see, it gives you the ability to accurately preview and troubleshoot your designs from within Dreamweaver. And one of the things I want to do is fix some spacing issues that I've got, so I'm going to turn Live View on. Now Live View shows us the page as it's rendered in the WebKit space, not Design View, and gives us a more accurate preview.
So I'm going to scroll down a little bit, and in my Tour Descriptions, I can see that I have some spacing issues here that I want to fix. Number one, I have had too much above these headlines, and I really would like the spacing to be a little but more equal between this area and the headlines themselves. Also this Rating area, I would like that to float a little bit more in the middle and not be as close to the top paragraph as it currently is. Okay, so those are some spacing options I want to change. So I'm going to use CSS Inspect to show me which elements I need to modify to get the proper spacing. So to turn Inspect on, I just go right up here beside Live View and turn Inspect mode on.
I'm just going to have Dreamweaver do it for me. So I am like, yeah sure, go ahead and Switch to that. That's fine. Now I like turning Live Code off because unless I am working with some type of an AJAX Widget, I don't really need that on. It is helpful to have my CSS Styles panel Open to current and have at Code View open. It's going to help me out. But I'm going to change over to my main.css, so that I can change my code really easily. Now I'm also going to double-click on the Files panel tab to collapse that, so that I can see my CSS Styles Properties. Okay, one last thing to do. I'm going to bring this a little bit over so that I have a little bit more room in looking at my elements on the page.
Now you might have noticed if I start hovering over elements, I get to see some highlight colors, so what's going on there? Well essentially, I'm looking at the Box model properties for those elements. The sort of a translucent blue color that we're seeing, that's the width and the height of the element. Any yellow is a margin, and any time you see that sort of magenta color, those are padding. So you can see padding, margins, your content regions. You can really kind of see what's going on there. You'll also notice that that right down here, on the Tag Selector, as we hover over an element, we get to see which element we're selecting. If we were in Code View, it would be highlighting code as well, and over here in the CSS Styles panel as I move through this, you'll notice that the CSS Styles panel in the current section is showing me the selector that I'm working on as well.
Okay, well let's start using this to tackle the spacing issues that we're having. One of the things that I'm most interested in finding out is how much space I need above my headings and then going ahead and setting that. Well if I hover over the Div Tour Description right here, I can see looking over at my CSS Styles panel that the margin on the bottom is 15 pixels and my padding 10 pixels. So I've got 10 pixels worth of padding on the top and the bottom, but I have 15 pixels worth of margin between them, as well. So if I hover over at my heading here, I get to see a really large margin above that. But if I look over at my properties, I don't see any margin top so what's the deal there? Well, just because it's showing you that property, doesn't mean that it's being set with that particular selector.
Let me show you what I mean. If I click on the heading, Big Sur Retreat, it actually turns Inspect mode off. It sort of freezes it in that location. So if I go up through my list, h1, h2, h3, I don't see any top margin. At h2, however, I see a margin top of 1.2 ems. Okay, well that's setting now for every single heading in my site. This particular one needs to be a little different, so I'm actually going to use this bottom selector, which is # mainContent, and I've got another divider here that I can change. You know, you really start to run out of screen real estate pretty fast, so let me explain that a little bit so I can see this selector a little bit better.
So #mainContent.tourDiscription h2, cool. So if I change the top margin on that one, that should adjust the spacing, so I'm going to say, Add Property > margin-top and since we know that our tourDiscription div tag has that 15 pixels worth of margin on the bottom, and we want to equal that, we're just going to say 15 pixels worth for margin-top. As soon as I do that, notice that we get lot more equal spacing between these elements on the page. Now anytime you select a specific element to work on it, Inspect mode is just sort of going to turn itself off. Notice that I can turn it right back on and start inspecting again.
Now you don't really need to be in the Split Screen View if you're not going to be doing hand coding. So if you're going to continually work with CSS Styles panel, you can just switch back to Design View and kind of see everything without having to worry about that. Dreamweaver keeps giving you this little message that says, are you sure about that? But you can just ignore that if you like. Okay now, what we need to do next is focus on the spacing of this span text right here, Span.option. Now its set to display as a block-level element, but we're not getting spacing above it. We'd really like to add an equal amount of spacing above and below it. Now in order to do that, we have got to navigate some pretty complicated waters.
This text is filed in this Span tag with a class or option applied to it, but it's inside of a parent paragraph. It's being told to display as a block-level element. Below the parent paragraph, we have another paragraph that contains these two items. These are links, one with A with a class of book, another link with a class of more. Now as we hover over those elements, we can see that some of those elements have margins applied to them, and some of them don't. Notice that the book has a top margin applied to it. More has a top margin applied to it. The parent paragraph has a bottom margin applied to it.
But our span text doesn't have a margin applied to it. Okay, well there's a little bit of a mystery here, too. Notice that what CSS Inspect can show me. If I hover over of the parent paragraph, take a look at where the bottom of that margin ends, that yellow border that you're seeing there. The very bottom of that is the bottom of that margin. Okay, kind of stare at that space for a moment. Now if I hover over this link, notice that its top margin goes up to that spot and ends. So those two margins, the top margin and the bottom margin of this paragraph are touching each other. Well that's kind of weird, because in CSS vertical margins are supposed to collapse.
So if you think about it, if those two elements are touching each other, they really should be collapsing down into one singular margin, but they're not, and why is that? Well let's use CSS Inspect to find out. Notice that if I hover over one of these links, book now!, I actually have another way of going through elements on the page. Certain elements, due to say collapsing elements or things like that, you may not be able to hover over them. But if I hit the left arrow key on my keyboard, notice that it goes right through the Tag Selector, in the Tag Selector right down here, this area, and watch right down here while I do this.
Notice it just goes back up to the paragraph that's inside of that, then to the div tourDescriptions. I can just keep going up. The right arrow will move me back down. So you can actually click to the left and to the right on your arrows to sort of browse through those areas. So you can look at some pretty detailed structure that way. Now what we've learned is that the parent paragraph, it's holding those two links, has collapsed because they're floated outside of it, but the top margin is still being applied. So what's happening is the bottom two's top margin is collapsing with that one, but because of that parent paragraph, the paragraph just above that one isn't collapsing with those guys, so essentially that paragraph that they're inside of it is acting as a buffer so that we don't get margin collapse there.
So we need to make a few changes to make sure that all works. Number one, we know now that we really don't need the top margin only, so I'm going to get rid of them. So with CSS Inspect turned on , I'm going to click on the book now! link, and I can see that just above that here's, this #mainContent a.book. I'm going to click on that, and I'm going to get rid of that top-margin. So I'm going to click on the margin section right here. Type in zero. Here we go. And now I'm going to do the same thing to learn more. I'll click on that. Click on its particular selector, which is just above it. If you're wondering what the bottom selector is, that's the hover selector, so that's the roll-over.
So let's click on #mainContent. tourDescription a.more, and I'll change that one, as well, to 0 pixels. So now we're not getting that extra margin. We're getting the collapse occurring. I can turn Inspect back on, and you can see that as we hover over those we don't get that margin, and the parent paragraph still has that margin, but it's collapsing now. So now those guys are looking the way that I want them to. I still would like to push my Optional 4 day tour available down a little bit so that sort hovers in between those. And if I look at its parent paragraph, I can see this particular margin on the bottom is 1em.
So I've got 1em's worth of margin on the bottom. So I'm just going to split the difference there, turn Inspect back on, find the Span tag and click, and then on its selector I'm just going to add a property there. I'm going to add margin-top, and we'll do .5em, so we'll do half of that, and there we go. That's going to push it down by about half of its available margin, and now the spacing is nice and equal. That was exactly what we wanted. And again, you can turn Inspect on and off any time you want. Anytime you focus on an element, Inspect is going to turn itself off.
So you just have to remember to turn it back on. So it's going to take you a little practice getting used to using it. Make sure, for example, that if you're over an element, and you're not looking at exactly what you think you should be looking at, use your arrows to either go to the left to go up through the source code, or you can use your right arrow to go down through the source code. Now it might take a little practice to get used to it, but the CSS Inspect gives you an incredibly powerful way to preview and refine your design. Keep in mind that CSS Inspect uses WebKit, so you'll still need to test it in other browsers. So the spacing you're getting here is the WebKit rendering with CSS Inspect might not be exactly what you see in other browsers.
So you definitely want to just keep testing it. However, it is a great way to visualize how elements are affecting each other and for tracking down the correct rule to edit, if you need to make changes to especially where spacing and different box model properties are involved.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.