In the previous post you learned the bare bones basics of how to specify the width of an element. It did not look great. For one thing, the text looked uncomfortably squashed right up to the edge of each box. Lets insert some breathing space for the text. We will also complicate things a bit more by adding another element – a framing box. The example page will look like this:
We will need two new CSS properties to create this "breathing space" – margin and padding.
You can download the files used in this exercise here.Margin
Remember the html box model? Each set of tags is like a box. Each tag-box can be nested inside other tag-boxes, or have tag-boxes nested inside them.
The "margin" property specifies the distance that a tag-box must be from the tag-box it is inside of.
For example – if I had HTML like this:
<div class = "black">
<div class = "red"> </div>
</div>
The "red" div tag is nested inside the "black" div tag, right?
If I wrote a CSS definition for the "red" div tag like this:
.red{margin:5px; }
This CSS definition gives the "red" box a margin of 5 pixels wide.
That specifies the distance that the "red" box must be positioned from its containing element – the "black" div.
Without a margin, the red box would sit right up against the edge of the black box. The margin property ensures that there is a certain distance between the outer edge of the red box and the black box it is inside of. Like this:
Padding
"Padding" specifies how much distance there should be between and element and whatever it contains. Lets look at a slightly different example:
<div class = "black">
<div class = "red">text </div>
</div>
If we wrote the following CSS definition:
.red{
margin: 5px;
padding:5px;
}
We know that the padding property specifies the distance between an element ("red") and whatever it contains (some text). Padding would look like this:
Applying Margin and Padding in your own example
Back to the example layout. We are attempting to achieve a layout like this:
We have quite a few boxes (remember, each tag set is considered to be a box).
The HTML for this page looks like this:
<html>
<head>
<title>A Poem </title>
<link href="style1.css" rel="stylesheet" type="text/css">
</head><body>
<div class = "container">
<div class = "redbox">
<div class = "heading">Peas</div>
<div class = "poem"> I eat my peas with honey <br>
I’ve done it all my life <br>
It makes them taste quite funny <br>
but it keeps them on my knife.
</div></div>
<div class = "bluebox">
<div class = "heading"> Horse</div>
<div class = "poem">The horse bit his master <br>
How came this to pass? <br>
It heard the good pastor say:<br>
"All flesh is grass"</div>
</div>
</div>
</body>
</html>
The CSS sheet looks like this:
.container{
width:450px;
background-color:#000000;
padding:10px;
}.redbox {
background-color:#DC143C;
padding:5px;
margin:10px;
}.bluebox {
background-color:#1E90FF;
padding:5px;
margin:10px;
}.heading{font-size: 2em;
font-family:Arial;
font-weight:bold;
}.poem{font-size:1.5em;
font-family:Arial;
}
Note the following (you may want to compare this with the previous example):
- In the HTML document: there is a new div tag ("container"). This is to create the black area that encloses both "redbox" and "bluebox". I included this simply to demonstrate margins and padding more clearly.
- You did not have to specify the width of the red or blue boxes. That is because you did specify the width of the black box that contains both of them. They will expand to fit inside the black box.
- Two new properties have been used in the CSS definitions: Margin and Padding.
- The "container" class has a padding property. The elements inside the "container" div (like "redbox" for example") have a margin property. This means that the total distance between the edge of the "container" div and the elements inside it, is the sum of their padding and margin properties like so:
Next we look at how to create a simple layout with columns.
Tags: CSS Positioning · margin · paddingNo Comments
0 responses so far ↓
There are no comments yet...Kick things off by filling out the form below.