Slacker's Guide to HTML: CSS Box Properties

CSS Box Properties

Margins
Padding
Border
Width & Height
Float
Clear

I will discuss these properties and some of their values individually, starting with the margin settings.

Margins are the spaces between things. Margins can be set for the right, top, bottom, and left all independently of each other. With stylesheets you can then make an element with a different margin on each side. Even the entire body of the document can have margins, just like in Word processing software. Right now I will list the possible margin properties and then we will dicuss each one:

margin-top
margin-right
margin-bottom
margin-left
margin

OK, now we will discuss the four first properties, the hyphenated ones. The last one is a blanket term and is more intricate than the others. We will discuss them all as one since they are all used the same and have the same possible values. For brevity's sake I will from this point on call those four margin properties "margin-t.r.b.l." collectively.

Margin-t.r.b.l. settings are simple. Margin settings set the size of the margin of an element. Negative values are permitted, but you should becareful because something with a negative margin might disappear or explode or otherwise mess everything up. But it actually could be cool if you think about it. Having negative values would make things overlap, and that's cool.

All the four margin-t.r.b.l. properties can be changed with the use of either a percentage(%) or a unit of measurement such as pixels, centimeters, etc. Now, since I have explained the whole measurement thing before and percentages are self-explanatory (bigger percentage = bigger margin), I'll just show you a few examples and we'll move on.

p {margin-top: 20%;}
cite {margin-right: 3px;}
dfn {margin-bottom: 1in;}

Those three examples each show different ways to use values to change the property's settings. In the first example we use a percentage as a setting, and the other two we use measurements of pixels and inches, respectively.

MARGIN

The margin property is used to define all the margin properties in one line of code. It's really unnecessary unless you're into saving space and time, but saving space and time is good, when you think about it. And if all the margin settings are going to be the same then you should use this because there's no point in writing it all out individually if you can do all at once instead.

You set the values the same way as the other margin settings with the margin property, except the value you give is applied to all the margins (left, right, top, and bottom). If you're simply applying a margin to one thing with margins of equal amount on all sides, then this will do you just fine. The code would look like so:

b {margin: 3cm;}

Padding

Padding is the amount of white space you want surrounding an element. The padding of that element will take on whatever background properties that are applied to the element it's padding, so it doens't necessarily have to be white space...it could be blue or even polka space. Let's assume you were putting padding around a table with a red background. If the padding was 3em then the table would have 3em worth of red around it.

Padding is set the same way as margin. There is a padding-top, padding-bottom, padding-left, and padding-right setting, and then a coverall padding setting. You apply padding just as you apply margins, with a length or percentage. That being said I will skip a detailed explanation. If you want a big explanation then just refer to the margin section up above this one and put padding in each time I say margin.

If you don't think you understand the difference between padding and margins then I really encourage you to take a look at the Interactive CSS Box Model Demo.

Border

To start off I will list all the border properties so I can get that out of the way. As I explain borders I will touch on each property one-by-one.

border-top-width
border-right-width
border-left-width
border-bottom-width
border-width
border-color
border-style
border-top
border-bottom
border-right
border-left
border

All the border properties that deal with widths (border-top-width through border-bottom-width and plain border) can have only absolute values. You can use thin, medium, or thick as value settings or you can use a unit of measurement.

Border-color simply needs a color as a value. For that you can use a hex code or a keyword. For a free program to download a RGB-Hex converter, click here.

Border-style can have a good number of values. The style is what the border will look like, such as will it be dotted or dashed or ridged. Here the possible values are...

none
dotted 
dashed
solid
double 
groove 
ridge 
inset 
outset

All of those values are pretty much self-explanatory. If you don't get it, just play around and experiment. I'd sample them all for you and show examples but that would be a lot of work and I'd explain them all but that would be boring for you and me. So just mess around with each of the values and see hat happens.

Border-top through border-bottom are coverall tags for the border settings. You include the information for color, style, and width all in one line of code for each, like so:

img {border-right: thin dashed red;}
p {border-top {3mm inset orange;}

As you can see in those two examples the three settings of color, width, and style are all addressed and covered with one line of code. No commas.

Border alone is the coverall for all the border-top through border-bottom properties. If you wrote this code...

cite {border: 5in groove fuschia;}

...then all the border-top, border-bottom, border-right, and border-left properties would be 5in, groove, and fuschia.

Height & Width

Height and width are settings for the amount of distance (length) from top to bottom and left to right, and these settings are good for all elements with which width and height are possible properties. Some examples of elements that width and height can be applied to are:

table
image
p

Of course there are plenty more elements to use width and height with, but I'll leave you to experiment with the code and try different tags out. Experimenting is really the only way to learn things - through trial and error.

Height and width can be either a percentage, a unit of measurement, or a default setting (auto). The default setting simply lets the element expand it's width and height as needed.

A percentage will increase or decrease the element to make it a certain percentage of it's parent element. If an image is inside a table that has a set width of 300 pixels and you set the width of an image inside that table to be 50%, then the image will be 150 pixels wide. By that same rule, if you set an image that is alone on a page simply inside the body of the document and you set it's width to 95% then the image will be 95% the width of the entire page. Got it?

Units of measurement are simple enough to understand. If you need to brush up, click that link.

Float

The float of an element is sometimes hard to understand. Check out what Webreview has to say about it: "Sets the float for an element. Generally applied to images in order to allow text to flow around them, but any element may be floated." Notice that the FireFox button is to the right of the content right now. It is floated to the right.

The float style lets you wrap text around an object. You can float something to the left or right of an object, or you can say float: none;. If you float something to the right it will position itself along the right edge of whatever container it is in. I will put the code for the above example, in which I floated a FireFox download button to the right and that caused the text to flow around it on the left.

<div style="float: right;>
<--firefox ad code went here-->
</div>
The float of an element is sometimes hard to understand. Check out...

Other float values can be left and none. None would be the same as not using the float property.

Clear

Clear is another great property. Clear, in the immortal words of Webreview, "defines which floating elements (if any) are allowed to exist to either side of the element."

In other words, clear sets the ability to have elements NOT float. Let's assume that you want elements to not be able to have text wrap around them on either side, OK? You might include code like this:

table {clear: both;}

That code sets the table text to disallow any other elements to float with it.

Other settings (values) for clear are left, right and none. None, just as in the float property, is equivalent to having not used the clear property.

Welp, that about wraps it up for box properties.