[CSS Guide] Margins, Paddings and Borders

[Iszak]

Margin
Margins allows you to specify the margin area of a box, margins are always transparent. You have 8 different ways you can define a margin, you can use the short hand and long hand.

Shorthand Margin
margin: all;
margin: top right bottom left;
margin: top (left & right) bottom;
margin: (top & bottom) (left & right);

Longhand Margin
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;



Padding
Padding allows you to add padding area of the box, padding properties increase the width and it inherits the background property from the element, much like margin it has both shorthand and longhand properties.

Shorthand Padding
padding: all;
padding: top right bottom left;
padding: top (left & right) bottom;
padding: (top & bottom) (left & right);

Longhand Padding
padding-top: <value>;
padding-left:<value>;
padding-right: <value>;
padding-bottom: <value>;



Border
The border property is quite large, you have many different longhand and shorthand methods. The border lies between the padding and the margin. You can use universal border properties to set all width, style, and color in one go, e.g. border: #000 solid 10px; will make all borders (top, left, right, bottom) to a solid black 10px border.

Shorthand Border
border: <value>;
border-top: <value>;
border-left: <value>;
border-right: <value>;
border-bottom: <value>;

Longhand Border
border-top-width: <value>;
border-top-style: <value>;
border-top-color: <value>;
border-left-width: <value>;
border-left-style: <value>;
border-left-color: <value>;
border-right-width: <value>;
border-right-style: <value>;
border-right-color: <value>;
border-bottom-width: <value>;
border-bottom-style: <value>;
border-bottom-color: <value>;


Border Width
The border width is simplify the width of the border, the value cannot be specified in percentages but can be specified in pixels or the values "thin", "medium" and "thick".

Shorthand Border Width
border-width: all;
border-width: top right bottom left;
border-width: top (left & right) bottom;
border-width: (top & bottom) (left & right);

Longhand Border Width
border-top-width: <value>;
border-left-width: <value>;
border-right-width: <value>;
border-bottom-width: <value>;


Border Color
The border color is simply the color of the border, the value can use a number of name colors e.g. "white", "black", "orange" or hexadecimal e.g. #000 (black) or #fff. Finally you can use RGB (red green blue) which are the prime colors like this rgb(red, green, blue), they can either be 0-255 in value or percentages e.g. rgb(255, 255, 255) (white) or rgb(0%, 0%, 0%) black. If there was no background the background would be transparent.

Shorthand Color
border-color: all;
border-color: top right bottom left;
border-color: top (left & right) bottom;
border-color: (top & bottom) (left & right);

Longhand Color
border-top-color: <value>;
border-left-color: <value>;
border-right-color: <value>;
border-bottom-color: <value>;


Border Style
The border style has many different styles you can apply to your border so it's simply not a solid line. You have "none", "hidden", "dotted", "dashed" "solid", "double", "groove", "ridge", "inset", "outset". You also have a variety of shorthand and longhand methods much like border width as follows.

Border Style Extended
None - No border, forces the border width to be zero
Hidden - Same as none but in terms of table border conflict
Dotted - A collection of dots
Dashed - Short line dashes
Solid - Single solid line
Double - Two solid lines and a space inbetween them.
Groove - Carved looking border
Ridge - Opposite of groove border
Inset - Makes the box looks embedded
Outset - Opposite of inset

Shorthand Border Style
border-style: all;
border-style: top right bottom left;
border-style: top (left & right) bottom;
border-style: (top & bottom) (left & right);

Longhand Border Style
border-top-style: <value>;
border-left-style: <value>;
border-right-style: <value>;
border-bottom-style: <value>;



Putting It All Together
Okay so to get you to understand and to put it all together I've done a simple example with the following properties.

width: 100px;
height: 100px;
margin: 10px;
padding: 5px;
background-color: #fff;
border: 1px solid #000;

http://www.zenithsites.com/tutorials/mpb-diagram.gifhttp://www.zenithsites.com/tutorials/mpb-box.gif

What comes first as you can see is the margin, then border, then padding then the actual box. The padding is the same color as the width (100 x 100) because it extends it so the new width will now be 110px wide and 110px heigh, +2 more pixels on each height and width due to the border.

Thank you, and I apologize for any mistakes you have may have found; this is quite a large tutorial.

Moved by Johno! (Forum Moderator) to Web Designing Tutorials.
By permission of Professor-Alex

[Jibbish]

nice tutorial iszak! +REP

[Iszak]

Thanks, I'm getting the moderator to update the last paragraph, it was badly worded :P
Edit: Forgot to add the color longhand and shorthand getting moderator to add that too.

[Decode]

The way you are doing it will only work on IE. Firefox and all other browsers take the width you have set the box to and deduct margin and padding from that so the box stays at 100px or whatever. IE adds it on. If there was a box like-

width: 200px;
margin: 5px;
padding: 5px;

- firefox would have a total width of 200px and IE would have a total width of 220px.

[Iszak]

I'm sorry Tom, but you're incorrect if you do it in Firefox, Internet Explorer 6, 7, Safari, Opera they will all show the same, you can try them yourself or look at my examples below. You can measure them in pixels yourself they're exactly the same :) and even do it yourself you will see that that padding increments the width/height and margin isn't subtracted from the width/height or what ever you were saying - of course in the screen shots you can't see the margin. But yeah, tell me what you think. But thank you for your comment Tom.

http://www.tehupload.com/uploads/3558f3831231b42Firefox_3.gif - Firefox 3
http://www.tehupload.com/uploads/62481f3831231b4Internet_Explorer_6.gif - IE6
http://www.tehupload.com/uploads/94911f3831231b4Internet_Explorer_7.gif - IE7
http://www.tehupload.com/uploads/795113acbd0f888Opera.gif - Opera
http://www.tehupload.com/uploads/32253acbd0f8881Safari.gif - Safari

[Meti]

Great TUT!

[Decode]

I'm sorry Tom, but you're incorrect if you do it in Firefox, Internet Explorer 6, 7, Safari, Opera they will all show the same, you can try them yourself or look at my examples below. You can measure them in pixels yourself they're exactly the same :) and even do it yourself you will see that that padding increments the width/height and margin isn't subtracted from the width/height or what ever you were saying - of course in the screen shots you can't see the margin. But yeah, tell me what you think. But thank you for your comment Tom.

http://www.tehupload.com/uploads/3558f3831231b42Firefox_3.gif - Firefox 3
http://www.tehupload.com/uploads/62481f3831231b4Internet_Explorer_6.gif - IE6
http://www.tehupload.com/uploads/94911f3831231b4Internet_Explorer_7.gif - IE7
http://www.tehupload.com/uploads/795113acbd0f888Opera.gif - Opera
http://www.tehupload.com/uploads/32253acbd0f8881Safari.gif - Safari

No, I am right

http://www.tehupload.com/uploads/516b00f1f3b8727test.png

The css code used there was-


.div
{
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid #000000;
}

}

[Iszak]

It's because you don't have a doctype this sends internet explorer into quirks mode, you need to define a doctype. Try this exact code you will see. The only way I could get your results is without a doctype.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
.div
{
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid #000000;
}
</style>

</head>
<body>

<div class="div">demo demo demo</div>

</body>
</html>