Margin
CSS Margins are nearly identical to the CSS Padding attribute except for one important difference: a margin defines the white space around an HTML element's border, while padding refers to the white space within the border. Setting the actual value of margin is just the same as with padding, so you can probably zip right through this lesson.Please see the example below for a visual representation. Note: A border has been added to each element so you that you may see the effects of the margin attribute.
CSS Code:
p {margin: 5px; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;} Display:
This is a paragraph that has a margin of 5 pixels on every side: top, right, bottom, and left.
This header has no margin. It is only spaced away from the paragraph because the paragraph has a margin of 5 pixels!
Margin: 1 Value
As you saw in the example above, margin can be uniform outside an element. Specifying one value will create a uniform margin on all sides: top, right, bottom, left. In addition to using exact values, you may also define the margin with the use of percentages.CSS Code:
p {margin: 2%; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;} Display:
This is a paragraph that has a margin of 2% on every side: top, right, bottom, and left.
This header has a margin of 5 pixels.
Margin: margin-(direction):
Each HTML element actually has four different margins: top, right, bottom, and left. It is possible to define these individual margins simply by adding a direction suffix to the margin attribute. Example form: margin-(direction). Defining only one direction will leave the other 3 margins untouched.CSS Code:
p { margin-left: 5px; border: 1px solid black; }
h5{ margin-top: 0px;
margin-right: 2px;
margin-bottom: 13px;
margin-left: 21px;
border: 1px solid red; } Display:
This paragraph had one margin specified (left), using directional declaration. Note that there is still a margin below and above this paragraph. This is because our CSS only replaced one of the four margins, which didn't effect the top and bottom margins.
This header had each margin specified separately, using directional declaration.
Margin: 4 Values
Four margin values can be declared at once by either specifying two or four values. When only using two values, the first will define the margin on the top and bottom, while the second value will define the margin on the left and right.When using the four value margin specification, the corresponding directions are: top, right, bottom, left. To help you remember what the order is, just remember that it starts at the top and then moves clockwise until it reaches the left. The examples below show partial (2) and complete (4) margin usage.
CSS Code:
p {margin: 5px 15px;
border: 1px solid black; }
h5{margin: 0px 5px 10px 3px;
border: 1px solid red;} Display:
This paragraph has a top and bottom margin of 5 pixels and a right and left margin of 15 pixels.
This header has a top margin of 0 pixels, a right margin of 5 pixels, a bottom margin of 10 pixels, and a left margin of 3 pixels.
Padding
With CSS Padding you will be able to change the default padding that appears inside various HTML elements (paragraphs, tables, etc). But first, let us make sure we understand the definition of padding. A padding is the space between an element's border and the content within it.Please see the example below for a visual representation. Note: The border has been made visible, for each element, so you may more readily see the effects of padding.
CSS Code:
p {padding: 15px; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;} Display:
This is a paragraph that has a padding of 15 pixels on every side: top, right, bottom, and left.
This header has no padding, which places the text right against the border!
CSS Padding: 1 Value
As you saw in the example above, padding can be uniform inside an element. Specifying one value will create a uniform padding on all sides: top, right, bottom, left. In addition to using exact values, you may also define the padding with the use of percentages.CSS Code:
p {padding: 2%; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;} Display:
This is a paragraph that has a padding of 5 pixels on every side: left, top, right, and bottom.
This header has no padding. It is only spaced away from the paragraph because the paragraph has a padding of 5 pixels!
CSS Padding: padding-(direction):
Each HTML element actually has 4 different paddings: top, right, bottom, and left. It is possible to define these individual paddings simply by adding a direction suffix to the padding attribute. Example form: padding-(direction). Defining only one direction will leave the other 3 default paddings untouched.CSS Code:
p { padding-left: 5px; border: 1px solid black; }
h5{
padding-top: 0px;
padding-right: 2px;
padding-bottom: 13px;
padding-left: 21px;
border: 1px solid red;
} Display:
This paragraph had one padding specified(left), using directional declaration.
This header had each padding specified separately, using directional declaration.
CSS Padding: 2 & 4 Values
Four padding values can be declared at once by either specifying two or four values. When only using two values, the first will define the padding on the top and bottom, while the second will define the padding on the left and right.When using the four value padding specification, the corresponding directions are: top, right, bottom, left. To help you remember what the order is, just remember that it starts at the top and then moves clockwise until it reaches the left. The examples below shows partial (2) and complete (4) padding usage.
CSS Code:
p {
padding: 5px 15px;
border: 1px solid black;
}
h5{
padding: 0px 5px 10px 3px;
border: 1px solid red;
} Display:
This paragraph has a top and bottom padding of 5 pixels and a right and left padding of 15 pixels.
