New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Margin essentials

From: CSS Web Site Design

Video: Margin essentials

This is the chapter where we have a lot of fun talking about basically ways of separating and spacing out various elements. This covers margins, borders, padding and basically, the reason that these things exist is to let you control the amount of separation between one element and another or between the edge of an element's content and the edge of the elements background, those sorts of things. A lot of very good design is in how things are separated and in what fashion and how much and all that sort of thing. Well, I can't teach you how to be a good designer, I can teach you the mechanics of how to realize a good design.

Margin essentials

This is the chapter where we have a lot of fun talking about basically ways of separating and spacing out various elements. This covers margins, borders, padding and basically, the reason that these things exist is to let you control the amount of separation between one element and another or between the edge of an element's content and the edge of the elements background, those sorts of things. A lot of very good design is in how things are separated and in what fashion and how much and all that sort of thing. Well, I can't teach you how to be a good designer, I can teach you the mechanics of how to realize a good design.

So what we're going to talk about in this video is margins. Margins are completely transparent space that goes around a given element. So if you think about the "blank line", between the paragraphs, that's actually margins on the paragraph, is top and bottom margins on the paragraphs pushing the paragraphs apart. There is no carriage return. They get stuck in there, that's actually just a margin. So we can use margins to do things like let's say, to push things away from each other. For example, the masthead, we're going to give it a bottom margin.

When you have an em-based margin like this one 1.75em this is one an three quarters ems and when it comes to margins and padding and borders 1em equals the font size for that element. So in this case we're saying the bottom margin of the masthead div should be one and three quarters times the font size for the masthead div. If the masthead's font size is 10 pixels, the bottom margin should be 17.5 pixels or there, varying, you know, as close to that as possible. So that helps push things away and the amount, the number of ems or pixels if it turns out it's going to be a pixel-based margins is dependent on the design really, that they've been given by the designer or that you've created if you are the designer.

So we can do things like remove margins by saying margin zero. From of pure CSS point of view, there's no such thing as a default margin, there aren't elements that have default margins from a CSS point of view. As far as CSS is concerned, an element is an element is an element. But Web browsers have intrinsic styles. For example, the margins on paragraphs that push one paragraph away from another, that's a built in browser style, it's. So, also things like unordered lists, unordered lists may have margins. They may also have padding, but we're going to talk about that in another video in this chapter.

So sometimes you find yourself explicitly removing margins as opposed to explicitly adding them. Now here's a case where the list items in the navlinks, let me scroll this down a little bit, so that you can see, the navlinks list items I'm giving each one of those a right margin, margin right of half an em, but if you look here before I hit Reload you can see the the list items that are about, that contain about us, about tea, brewing, drinking, products and contact us, these are kind of smooshed together and so with half em right margin on each one of the list items that contains those links, you can see they start to spread apart a bit.

We're not done with pushing them part for this chapter, but we are for this video. Then we're just going to spread this out a little bit and come back to add more stuff later. So you can keep going with this. For example, the homelink and that's the anchor element up here, the a href equals, and id equals homelink and then there's the javacotea image inside of it.

I've given us some margins. I'll come back to what that means in just a second but there are some of the effects of pushing things around. So this 1em 2em 1em 2em, these are merchandise in the order top right bottom left, which is clockwise from the top so 12 3 6 9 or TRBL keep you out of trouble is for top right bottom left. So the first of the four here is the top so it's a 1em top margin, a 2em right margin, a 1em bottom margin and a 2em left margin.

This margin is a shorthand, it's a shorthand for the properties margin top, margin right, margin bottom and margin left. You don't have to write it out quite like this however you notice there is a repetition here, we have been effectively a b a b, 1em 2em 1em 2em. We can actually take off the second pair of a b, so we can just say 1em 2em what that's going to is it's going to set the top and right values and then the bottom value will get copied from the top and the left value will get copied from the right. So this margin 1em 2em is exactly functionally equivalent to the 1em 2em 1em 2em.

Again, as with so many other things in CSS, in this sort of situation, which one of these you choose to use is really up to you if you prefer writing out all the values so that you can see them, then that's fine, go ahead and do it. If you would prefer to have fewer characters so that you have just the bare minimum of what you need then you can go this route. Now, had we decided that we wanted a top 1em, a right 2em, no bottom margin and a left margin of 2em, could of set 1em 2em 0 and in this case that's the top right and bottom values and the left side gets copied from the right value of 2em.

We'll leave it out like that and just add few more margins I suppose. So in this case, we have for each one in the content column, the h1 should have a top margin of zero and a right margin of 33%, bottom margin of 1,25em and no left margin. So that 33% if we go back over, and take a look, keep your eye on the about tea history line is going to shrink down and the space to the right of it from between the edge of the white background on that h1 and effectively the right side of the column, that's that 33% margin.

The easy way to think about this is that that's 32% of the total space that the h1 was taking up before we gave it the margin. So within the area that the h1 can take up inside of the content div that they are setting inside, there's this 33% right margin and so the background area of the h1 is taking up the other 67% of that space that's available to it. That will keep the h1 a little bit shorter as shown in the design.

We can keep going with this and add margins to h2 so that the h2, The Legendary Origins of Tea, there'll be a little bit of a difference there. Some of these may seem very subtle and you might wander if there's really a reasons for them. In put effect, there is, basically because that's what was shown in the comp.

So here I've taken the margins off for the form element in the sidebar. Form elements by default have a margin, at least in internal web browser and remember that's not a CSS default, it's a browser default, but every browser I've come across in the last 12 years has had default margins on form elements. So here's a case where with this sidebar div rule, the margin top 0.75em, what we're going to do is push a number of divs in the sidebar apart from each other.

There's a little space right there between each of the divs. Divs, at least according to the browser of the day, do not have an intrinsic margin so here's a case where I'm using the shorthand property to sort of make my life let's say simpler for this tea of the day h4, what I really want is a bottom margin and I don't want any the other margins and I could say margin top 0 margin bottom 0.5em and then trust that the browser is not going to have left or right margins applied to each form intrinsically, of course that means that I'm relying on browsers to do something that I expect them to do, not only now, but all the way into the future and if there's one thing that close to a decade and a half in the industry has taught me is that browsers will never honor those wishes over the long haul.

They are always going to change something, usually something that you would least expect so in this case what I've set is I want to get rid of the top margin, I want to set the specific bottom margin and I want to make sure that there's never any left or right margins, so I'm just going to say margin 0 0 0.5em, so that's zero top, zero right, half em on the bottom and then the left, the value fort he left margin gets copied from the right margin because I didn't supply it. So there you go, and then the last thing I'm going to do here is do something that probably is a little odd at first. Let's see the results.

Notice the table here, the table is currently sitting flush left inside of the box that it occupies. And when I reload it's going to center itself, and what happens in CSS if you have an element like a table that has a limited width, as tables do, tables will be as narrow as they can be and still display that content or if you have an element to which you've given an exclusive width, let's say, we said for this table we wanted it to have a width of 100 pixels, that's not necessarily a great idea, but we're going to go with it, or even let's say 80 percent, we want it to be 80% wide, we might decide that.

So if you have an element that has a width specified or you have a table element, basically, which sort of implicitly derives a width from its content and then you give it automatic left or right margins, then the automatic left or right margins basically will take the difference between the elements width and the total amount of the width that that has, split in two and take it equally, so that creates a center effect, because the automatic left and right margins are set to be equal. And that puts the element centered inside of its parent. Now had I done that for the h4s, let's say I did this, for the tea of the day h4s, I set margins zero auto 0.5em and hit Reload, there's no real change here, they are centered is just that they take up the full width of the divs inside which they live so that's technically centered even though, visually, it's no different than what we saw before, but that's because by default, if you don't give an explicit width to something like an h4, a paragraph or a div, it's just going to expand out to be as wide as it can be to fill the space that has and so, almost nobody ever puts an auto left and right margins unless they're trying to center something like a table or something that has an explicit width.

There's one small backward compatibility note I'd like to make this auto margin centering effect does not work in Internet Explorer 5.5 and earlier so if you are working with IE 5.5 and earlier, then this auto margin doesn't really work. You can fake your way around it though by saying effectively by centering, using text-align center on whatever the parent element of the thing is that you're trying to center, and then for the thing you're trying to center, you say text-align left because in IE 5.5 and earlier, IE 5.5 and earlier thought that text alignment also elements align, even though it doesn't.

Text align only refers to the alignment of text, it says nothing about centering or right justifying elements like tables. Still IE 5, IE 5.5 and earlier versions thought that it did and for whatever reason they didn't implement the auto margin centering, so this is a known workaround where you use text alignment and auto margins in conjunction to get the centering effect even in IE 5 and IE 5.5 and if you ever run into a situation where you're going to need to do that, you can always do a Google for, you know, text align auto margins centering or something like that and the, get more information.

So that's a quick look at margins and after this we're going to take a look at Borders and Padding.

Show transcript

This video is part of

Image for CSS Web Site Design
CSS Web Site Design

73 video lessons · 60739 viewers

Eric Meyer

Expand all | Collapse all
  1. 14m 34s
    1. Welcome
    2. What is CSS?
      5m 34s
    3. Design tour
      2m 38s
    4. Using the exercise files
      1m 20s
    5. Installing the Web Developer toolbar
      4m 34s
  2. 25m 56s
    1. XHTML essentials
      3m 55s
    2. CSS essentials
      5m 17s
    3. Embedded style sheets
      2m 20s
    4. Linking a style sheet
      2m 19s
    5. Linking to multiple style sheets
      2m 20s
    6. Using linked and embedded style sheets together
      4m 21s
    7. Using imported style sheets
      5m 24s
  3. 57m 48s
    1. ID selector essentials
      6m 38s
    2. Class selector essentials
      4m 9s
    3. Best practices for classes
      4m 52s
    4. Grouped selection
      4m 2s
    5. Descendant selectors
      6m 44s
    6. The sources of style
      6m 38s
    7. Specificity
      8m 21s
    8. Making things important
      4m 32s
    9. Inheritance essentials
      5m 12s
    10. Making things really unstyled
      4m 2s
    11. User style sheets
      2m 38s
  4. 39m 3s
    1. Box model essentials
      7m 35s
    2. Simple floating
      5m 3s
    3. Using float for layout
      5m 5s
    4. Fixing column drop
      5m 35s
    5. Clearing essentials
      4m 20s
    6. Float containment
      6m 35s
    7. Creating a navbar from a list
      4m 50s
  5. 38m 3s
    1. Coloring text
      4m 13s
    2. Defining color in CSS
      8m 12s
    3. Coloring backgrounds
      6m 35s
    4. Applying background images
      4m 19s
    5. Manipulating the direction of background images
      2m 52s
    6. Positioning backgrounds
      7m 23s
    7. Background shorthand
      4m 29s
  6. 58m 28s
    1. Altering line height
      7m 32s
    2. Font style and weight
      5m 45s
    3. Sizing fonts
      9m 59s
    4. Using font families
      10m 38s
    5. Font shorthand
      6m 5s
    6. Justifying text
      4m 56s
    7. Vertically aligning text
      4m 22s
    8. Transforming text
      3m 49s
    9. Text decoration
      5m 22s
  7. 44m 40s
    1. Margin essentials
      14m 21s
    2. Adding borders
      6m 52s
    3. Padding
      9m 17s
    4. Using negative margins
      7m 19s
    5. Margin collapsing
      6m 51s
  8. 20m 38s
    1. Styling tables and captions
      5m 23s
    2. Styling table cells
      6m 30s
    3. Styling a column with classes
      4m 51s
    4. Styling links inside table cells
      3m 54s
  9. 30m 40s
    1. Styling for specific mediums
      4m 3s
    2. Creating a print style sheet
      6m 35s
    3. Hiding layout for print
      4m 11s
    4. Styling for print
      6m 34s
    5. Complex styling for print
      4m 37s
    6. Creating a footer
      4m 40s
  10. 37m 23s
    1. Getting started
      1m 11s
    2. Setting global styles
      4m 4s
    3. Defining masthead and navbar colors
      3m 27s
    4. Layout of the navlink bar
      3m 38s
    5. Using columns
      4m 49s
    6. Setting content styles
      1m 53s
    7. Creating the sidebar boxes
      5m 42s
    8. Creating the sidebar form
      3m 23s
    9. Completing the sidebar
      3m 29s
    10. Making a table
      3m 12s
    11. Creating a footer
      2m 35s
  11. 1m 28s
    1. Goodbye
      1m 28s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes changes my life forever. @JosefShutter
@lynda is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?


Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.