CSS - Margin, Border and Padding

  »   CSS Introduction  »   CSS Tutorial - Margin, Border and Padding

CSS - wrapping content.

Using CSS we can wrap the content, we can set the distance between the content and the border, and the space with other elements on the page. For that, the following CSS attributes will be used:

html box model

  • margin - The distance with other elements on page or page.
  • border - a line that surrounds the element
  • >padding - the distance between the border and the content itself
    • content - the content can be whatever you like, for example text, image, div, span, etc

This is how we apply the above attributes to an HTML tag:

CSSdiv {
width:200px;
padding:15px;
border:black 5px solid;
margin:20x; 
}

Observation:
We will consider this example as the element itself. And this element has a total width of 280px (200 + 15x2 + 5x2 + 20x2 = 280px).

Conclusion:
content width + left padding + right padding + left border + right border + left margin + right margin = Total width
and
content height + top padding + bottom padding + top border + bottom border + top margin + bottom margin = Total Height

This is a simple formula that you'll have to take into consideration when setting up HTML element properties.

Note:
Just a simple mention here: that Internet Explorer includes padding and border inside the width in case you specify it. To prevent this to happen you have to start a document by specifying a DOCTYPE.

HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<style type="text/css">
			div {
				width:200px;
				padding:15px;
				border:5px solid;
				margin:15px; 
			}
		</style>
	</head>
.............................................

CSS - Border Style

CSS border will just draw a simple border around the HTML element. The border-style attribute is the one that is used to change the border look. These are the values that can be used with border-style:

  • none
  • solid
  • dotted
  • dashed
  • doublegroove
  • ridge
  • inset
  • outset

There are some values like for example groove, ridge, inset, and outset can generate 3D illusions if they are used with the right colors

CSS - Border width

The border width in CSS it's stetted using the border-width attribute. But before this to work you will have to specify a border-style first. We will use pixels length or we can use values like "thin", "medium" or "thick". Here is an example:

CSSdiv {
border-style:solid;
border-width:2px;
}

CSS - Border color

Border color is one of the most used when working with borders. Just use border-color attribute to set a color for your border. The value for this attribute is a hexadecimal or RGB value, or even a pre-established name. Just to mention here that you can use a transparent color for the border if you like. Here is how border-color works:

CSSdiv {
border-style:solid;
border-color:red;
}

Observation:
There is also a way to use different border style and colors for every side of the content box..

CSSdiv {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Here is a short-hand way to do it.

CSSdiv {
border-style:dotted solid;
}

Using the CSS short-handway to write code you can save time and your code will lighter and easier to read and maintain. Here are some example and different construction methods:

- div { border-style:dotted solid double dashed; }
border-top is dotted, left is solid, right is double and bottom is dashed.

- div { border-style:dotted solid double; }
border top is dotted, right and left are solid and bottom is double.

-div { border-style:dotted solid; }
border up and down are dotted and left and right are solid.

- div { border-style:dotted; }
I am letting you guess here. Yep...all borders arre dotted.

Although the example is about border style, the same rules apply to all other attributes mentioned in this tutorial.

Another form of shorting the code is writing all values into one and only property like this:

CSSborder: 4px dotted #EFEFEF;

Just make sure you maintain the order

CSS - Margin

The CSS margin attribute sets, like the name suggest, between the border and all other HTML element on the page. The margin is basically just space around the box an ti will be transparent.

To define the space around our box model we will set the margin for all four sides of the element: TOP, RIGHT, BOTTOM, LEFT. Please remember this order, as it's going to be useful when using the shorted code version

CSSmargin: 30px 20px 30px 50px; /* up, right, bottom, left */ 
margin: 30px 20px 50px; /* up, right and left, bottom */
margin: 30px 20px;  /* up and bottom, right and left */ 
margin: 30px;  /* up, bottom, right, left - This will just set a 30ps width margin around the element. */

CSS - Padding

Padding refers to the region between the content and the border. We will set this region, same way as the margin attribute:

- padding-top:10px;
- padding-bottom:10px;
- padding-right:20px;
- padding-left:20px;

Short-hand expression is as follows:

CSSpadding:25px 50px 75px 100px;

CSS - Outline

The outline attribute was introduce in CSS2 with the following values:

  • outline
  • outline-color
  • outline-style
  • outline-width

Outline is drowning a line outside of the total width of the element. It does't really have to much use.

CSS - Font and font families
CSS - Lists
CSS Introduction
References
Miscellaneous
More CSS Tutorials