Example Box (Code 2)
There is a funny thing in the CSS world known as "the box model." People try to explain it in many different ways, but it's really not that hard; all it asks you to do is to imagine that every HTML element is a little "box" on your screen, and you can affect properties of that "box" with CSS.
-
Borders Borders define how the borders around the box containing your HTML element are presented. Playing with borders is a good way to start visualizing your HTML elements as boxes. You can specify border widths, styles, and colors, or use a shorthand to do all three at once. You can also affect certain borders but not others by calling each border by name.
<html>
<head>
<title> Example Box (Code 1) </title>
<style type="text/css">
p.solidb { border-style: solid; }
p.solidblueb { border: 1px solid blue; }
p.rlb { border-right: 1px solid green; border-left: 2px dashed blue; }
</style>
</head>
<body>
<p class="solidb">This text will have a solid border around it</p>
<p class="solidblueb">This text will have a 1 pixel wide, blue border all the way around it</p>
<p class="r1b">This text will have different borders on each side</p>
</body>
</html> -
Width, Height, and Overflow Width, height, and overflow control the element's box's width and height and how text behaves within the confines of that box.
<html>
<head>
<title> Example Box (Code 2) </title>
<style type="text/css">
p.exlength { width: 100px; background-color: blue; }
p.exheight { height: 100px; background-color: green; }
p.exover1 { width: 200px; overflow: hidden; background-color: gray; white-space: nowrap;}
p.exover2 { width: 200px; overflow: scroll; background-color: red; white-space: nowrap;}
</style>
</head>
<body>
<p class="exlength">This section of text will be 100 pixels long</p>
<p class="exheight">This will<br /> have a<br /> height<br /> of 100<br /> pixels</p>
<p class="exover1">This just keeps going and going and going and going but you can't see it go</p>
<p class="exover2">This just keeps going and going and going and going and you can scroll</p>
</body>
</html> -
Margins and Padding Margins and padding is where the box model often starts confusing people. Basically, margins get applied outside the element's border, whether you can see the border or not, and padding is applied within the element's border, whether you see the border or not. This is best made clear with an example where you can see the element with its border.
<html>
<head>
<title> Example Box (Code 2) </title>
<style type="text/css">
p.exmargpad
{
width: 300px;
border: 1px solid blue;
margin: .5cm;
padding: 1cm;
}
</style>
</head>
<body>
<p class="exmargpad">There is a .5 cm margin all around this box, <em>outside</em> the border. There is a 1 cm padding all around this box, <em>inside</em> the border. This example makes you feel better about margins and padding, we hope. Margins and padding are your friends, they love you! The problem is that this box is different sizes in Internet Explorer and Mozilla/Netscape, so beware.</p>
</body>
</html>
