Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member