Cascading Style Sheets: Tutorial - Page 07

Borders, Margins and Padding

HTML elements are really just a bunch of little two-dimensional boxes floating around each other. The browser sees each HTML tag as a box with images, text and other tags with more boxes inside it. The margin is what separates elements, and it is the outermost part of the element. After the margin and moving inward, the border comes next. Borders are typically small, but they can be very thick if needed. After the border, the padding is next. When the background is colored or has an image assigned to it then the area under the padding is colored, too, unlike the margin area which remains clear. Also, the space beneath the border is colored when the background is colored. Finally, the content is last, inside the padded area.

Notice how the inner elements' margins do not apply to the outer edges of their containing element. The margins only apply to the sibling elements, or in relation to the other elements of the container.

Notice how the eighty pixel margin extends outside its containing element when their is not a box at the end. This is why there is an eighty pixel space between it and this paragraph. Click here to add a clear, one-pixel-high box to the end (more on height below). This is because the margins only apply between the boxes inside their containing box. Click here to set its margin-bottom to zero and remove the blank space between this paragraph and the box.

Also, notice that the margins between the boxes are not added together. One would expect that a margin of ten pixels and a margin of twenty pixels creates a total space between boxes of thirty pixels; however, this is not how it works. The larger of the two margins are applied so in this case it is twenty pixels.

Now notice that, after adding a border, it increases the size of the boxes. And adding a clear, one-pixel-high box to the beginning fixes the margin of the top box.

The code for this is as follows:

<div style="background:#369;">
	<div style="height:1px;"></div>
	<div style="border:10px dashed red; margin:10px;padding:10px;background:#007;color:#fff;">
		border: 10px dashed red; margin: 10px; padding: 10px;</div>
	<div style="border:10px dashed red;margin:20px;padding:20px;background:#007;color:#fff;">
		border: 10px dashed red; margin: 20px; padding: 20px;</div>
	<div style="border:10px dashed red;margin:40px;padding:40px;background:#007;color:#fff;">
		border: 10px dashed red; margin: 40px; padding: 40px;</div>
	<div style="border:10px dashed red;margin:80px;padding:80px;background:#007;color:#fff;">
		border: 10px dashed red; margin: 80px; padding: 80px;</div>
	<div style="border:10px dashed red;margin:0;padding:80px;background:#007;color:#fff;">
		border: 10px dashed red; margin: 0; padding: 80px;</div>
	<div style="border:10px dashed red;margin:80px;padding:0;background:#007;color:#fff;">
		border: 10px dashed red; margin: 80px; padding: 0;</div>
	<div style="height:1px;"></div>
</div>

Next, using a border-top (to create the line), a negative margin-top, a positive padding-top and padding-left (padding can never be negative) of the <p> tag one can create this effect. The :first-letter pseudo-element has already been covered.

<h2 style="font-variant:small-caps;margin-bottom:0;">Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
<p style="border-top:1px solid #000;
	margin-top:-6px; /* can be adjusted */
	padding-top:10px;
	padding-left:4em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

All four sides of the margin and padding can be specified at once using the margin and padding properties. Define the top, right, bottom and left values. For example:

<p style="
	margin: 10px 15px 10px 15px;
	padding: 4px 7px 4px 7px;
	">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Using the individual properties, this example is synonymous with the previous one:

<p style="
	margin-top: 10px;
	margin-right: 15px;
	margin-bottom: 10px;
	margin-left: 15px;
	padding-top: 4px;
	padding-right: 7px;
	padding-bottom: 4px;
	padding-left: 7px;
	">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Example border styles:

Comment