Browsers see every element in your HTML page as being contained in its own rectangular box. You can style these boxes by adding borders, margins, padding and even backgrounds to them. You can also use CSS to reposition them on the page. Here is a first look at the Box Model.
Every box has 3 available properties that can be adjusted to control its appearance:
Padding
Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents.
Border
Every box has a border (even if it is not visible or is specified to be 0 px wide). The border separates the edge of one box for another.
Margin
Margins sit outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes
If you specify the width of a box, then the margin, borders, and padding are added to its width and height.
Border Width
border-width: 2px;
You can control the individual size of borders using four separate properties:
border-top-width border-right-width border-bottom-width border-left-width
Border Style
border-style: dotted;
Border Color
border-color: #0088dd;
Padding
The padding property allows you to specify how much space should appear between the content of an element and its border.
padding:10px;
You can specify different values for each side of a box using:
padding-top padding-right padding-bottom padding-left
Margin
The margin property controls the gap between boxes. Its value is commonly given in pixels.
margin: 20px;
You can specify different values for each side of a box using:
margin-top margin-right margin-bottom margin-left
Centering Content
If you want to center a box on the page (or center it inside the element it sits in), you can set the left-margin and right-margin to auto.
p.example {
margin-left: auto;
margin-right: auto:
}
