 So, now let's look a bit more at some of the essential CSS properties. One of the most important is one called display, which has a number of different values, but the two most common and most important are block and inline. A number of tags, including div, p, the header tags, h1 through h6, ul, ol, those all have their display properties set to block. And then the tags span a for anchor for hyperlinks and image, those three tags by default have the display value inline. So we have this division between what we call block elements and inline elements. And in fact this distinction is all that separates div tags from span tags. Div and span tags are both generic containers, they're just things to contain other tags or text content, but the only thing that makes them different is that by default, div tags have a display value of block and span tags have a display value of inline. And in fact, if you were to give a div the display value inline, it would in effect act just like a span. And vice versa, if you give a span the display value block, it would then act just like a div. So what is the significance of display block and display inline? Well, an element with display value of block is by default something which takes up the whole width of whatever it is contained within, and by default its height is whatever is necessary to fit all of its content. Notice in both these cases I said by default because you can modify the width and height of a div using other CSS properties. In contrast, an element which is display inline is always just as wide and tall as its content, and you cannot modify that. You cannot, with the CSS properties width and height, change the width or height of an inline element. Furthermore, inline elements, unlike block elements, are not necessarily rectangular. They get laid out much like text gets laid out. You know, you type in your word processor and every word you type gets flowed onto the end of your line, and when it needs to wrap on to successive lines it does so. So another way to think of it is that inline elements can share the same line. They can be adjacent to the elements which directly proceed and follow them, and if necessary the content of a span can get split across lines. To illustrate this difference we have here a simple HTML document that contains merely two divs. For convenience I've made the background color of the first div pink and the background color of the second div light blue so you can see the space which they both take up. And first of all notice that both of these divs are perfectly rectangular. They take up the full width available to them, and both of these divs are included directly in the body, so they take up the width of the whole page. And the first div you'll notice is taller than the second, but that's just because both divs are sized to whatever is necessary to accommodate all of the content inside of them. If we then take this exact HTML file and just change the divs into spans, well now the display is inline rather than block, and you can see first off that neither spans are rectangular. Their text content is simply flowing from one line to the next, and as soon as the end of the text is reached, well that's the end of the span. You'll also notice there's a subtle difference where in between the lines of text is actually a little bit of space that's not being filled in with the background color because technically there's a bit of space between the lines which isn't really part of the span area. Also very importantly, notice that the second span picks up immediately on the same line where the previous span leaves off. That's what I meant when I said that inline elements can occupy the same line as the other inline elements immediately adjacent to them. So that's the essence of the distinction between block and inline. Keep in mind there are a few other display properties. They're foundless commonly and useless commonly. There is one though called block-inline which is sort of a hybrid between the two. And also keep in mind that the block versus inline distinction has some subtleties I didn't really go into. Moving on, here you've seen I've taken that same example with the div tags, but I've opened the page in an extension for Firefox called Firebug which is a very handy tool for inspecting the current web page you're looking at. And it has this handy little chart here on the right for displaying the layout of an element. And what it's showing you is the sizing information for that element, including the margin, the border, and the padding. Together these things make up what is called the CSS box model which refers simply to how in HTML and CSS these boxes, these block elements mainly are treated. When we say that an element has a width of 100 pixels and then a border of 5 pixels and a margin of 20 pixels, what exactly does that mean? Does the border get counted as part of the width or is it in addition to the width or what? Well, the way it works is that the width and the height properties of an element apply just to the content area, that innermost box. And then any pad in your add is on top of that. The border then surrounds the padding and outside the padding is this further area called margin. The difference between margin and padding is a bit subtle. While, as I just said, margin goes outside the border and padding goes inside the border, well, a lot of times you don't have a border on your element. So it sometimes is hard to decide, wait, should I use margin or should I use padding to put space around this element. And it turns out that in different contexts there's actually subtly different behavior between margin and padding. In particular, margin in some contexts has this behavior called margin collapsing, whereby two adjacent margins with margin areas that are touching each other, well, then those two margins can collapse into each other, where if one has the 20 pixel margin and another has a 10 pixel margin, you don't get a 30 pixel margin, you just get a 20 pixel margin. So there are some tricky behaviors like that to keep in mind. If I have to give a general rule though, I would say that you use margin to put distance between the block itself and adjacent items and then use padding when you want to squeeze within that area, you want to squeeze the content into a smaller confines. It's still a pretty subtle distinction, but I find it's a useful rule of thumb. In any case, here's a simple illustration of these properties. Here we've taken the top div and first we've given it a border of three pixels and we specify that that border is solid black, you'll note. And then for the padding, we've specified 20 pixels, so there's padding of 20 pixels all the way around between the border and the actual content. And then the margin, we have specified as 30 pixels. And the subtlety to note here is that we didn't specify any width for our div. So by default, in accumulation of its margin, its border, and its padding, and its content, the width is still taking up only as much as is allotted to it in that space within the body, basically within the width of the page. So you can see in the little diagram, Firebug gives us on the right that the width of this div is actually 792 pixels. That's the width of the content area. If we were to manually specify a width of something greater than 792 pixels, like say 800 pixels or 900 pixels, then this div, including its content, its padding, its border, and its margin, its width would exceed the width of its container, the body. So you'd actually get in our browser window here a little horizontal skull bar at the bottom because then the width of the page would actually exceed the width of the browser window. Now again, note here how I've specified the border. There's a property called border and I've given it the value three pixels solid black. If I just wrote three pixels, you wouldn't see any border because you have to actually specify that it's solid and that it's black. Otherwise, if you don't specify a color and if you don't specify a style, whether it's solid or dashed or dotted or there's a few others, if you don't specify those things, you won't see any border. Now like many things in CSS, there's actually different ways of expressing the same thing. Like say the border here, I can specify the color not as a color name, but as a button hex. I can write either number sign 000 or number sign 000 000 either the three digit form or the six digit hex form. And additionally, you can actually also specify these border properties independently with three different properties. You can use border hyphen width, border hyphen style, and border hyphen color. And this is convenient because imagine say we've applied a whole bunch of elements by some CSS rule, we've applied a border of two pixels solid black, but then there's just one item, this one element where we just want to change the color and just the color. We don't want to change the width of the style. Well then we can apply to that element just the border hyphen color property. And somewhat similarly, when it comes to specifying paddings or margins, you can write the padding as we did with just a single width value, the single number, meaning the same padding on all four sides, or you can alternatively write out four different numbers to specify the top, the right, the bottom, and the left in that order. So we can give the four different sides different amounts of padding. And alternatively if you write just two numbers, then that's interpreted as first being the top and the bottom, and then the right and the left. And once again for convenience, sometimes you just want to on an element specify just its left padding or its right padding or its bottom or its top, so you can actually specify them with four separate properties. You can write just padding hyphen left to specify just the left or padding hyphen right to specify just the right and so forth. And the margin property works just the same way. If you specify just one number for the property margin, that means it's the margin all the way around, but you can write it as four separate numbers or just two separate numbers to mean top and bottom and right and left. Or you can use the margin hyphen left property, the margin hyphen right property, et cetera. And finally actually with borders you can also specify different widths on all four sides and actually different colors and different styles on all four sides. So you can specify a property of say border hyphen left hyphen color to specify just the color on the left side and so forth. By the way, I feel like you'll find that it takes you a long time to remember that the four numbers are written first in order of top, right, bottom, left. The quick way to think of that is that it's clockwise starting from 12 o'clock. Top, right, bottom, left goes from 12, 3 o'clock, 6, 9 o'clock. So these few properties we've discussed display, margin, padding, border, width, height, and a few others we haven't discussed, position, z-index, flow, clear overflow clip. These are the primary properties we use to layout our pages, to range all the elements and to proper sizes and proper positions. I'm not going to go over here, position, z-index, flow, clear overflow clip, and I'm not going to go into some of the more subtleties of the ones we've already covered either. If you really want to understand CSS layout and you're going to want to understand it if you're not going to get frustrated making your web pages, then you should read a couple books. In particular, there's this one called, there's an O'Reilly book called HTML and CSS. The good parts, that is probably the best place to start, and also the CSS, the missing manual is pretty good too. Once you read those books, you'll understand better why HTML and CSS are structured the way they are. You'll get a bit of the history and understand why best practice says to do certain things one way and not the other. For example, we'll give you some insight into the debate between what's called CSS layout and table layout. CSS layout is to do the layout of your pages using CSS properties, mainly the ones I just listed. Whereas in contrast, what's called table layout is the old way of doing things where you would primarily position things on your page by putting things into table tags, even though tables weren't really designed for this purpose. Most tables originally were for displaying tabular data in two-dimensional grids. But because in those early days, back in the 90s, CSS actually wasn't a reality. It wasn't introduced into browsers at all until the end of 1996. And for many years, it just didn't have a lot of the features or work properly in real-world browsers the way it was supposed to. So out of necessity, web designers would abuse the table tag to arrange their elements into the proper positions. And even as CSS got better over the years as the browser started implementing it properly, for many, many years, people still would insist on using table layout rather than CSS layout, because as I've sort of hinted at, there are certain things in CSS layout that are kind of hard. It can be kind of tricky sometimes to get, for example, two divs to exist side-by-side, for example. So because of those frustrations and also because people just went with what they knew, for many years, people would stick with table layouts. In any case, if you want to read up on this debate, there's one link here I have that's in support of CSS layouts, and then there's this other contrary view in support of table layouts. So a few people still insist on saying that table layouts are a good or at least acceptable way of doing layouts still today, though I would say that's certainly the minority view now. A large majority of web designers, I would say, have moved on now to doing everything as much as possible in CSS without falling back on using tables.