Borders and Fillers in CSS: CSS in borders and fillers

Borders and Fillers
Htmldog Guide > CSS Primary guide >
Borders and Fillers
Border margin and filler padding (on the basis of the translation practice of the domestic publishing house, margin is translated into the border, padding is translated into fillers, translators according to customary translation. However, the translator believes that margin translation into the outer margin, padding translation into the inner margin more straightforward and image. You can adapt to these two different translations according to your own habits. The most commonly used two attributes of a separate element. The boundary is the distance from the outside of the element, while the filler is the inner distance of the element.
Improve the code for H2 as follows:
h2 {font-size:1.5em; Background-color: #ccc; margin:1em; padding:3em;}
You can see the width of one character on the outside of level two headings, and it's bloated, because there are 3-character-width fillers inside a level two header.
You can set different values for four edges of an element. Margin-top, Margin-right, Margin-bottom,
Margin-left, Padding-top, Padding-right, Padding-bottom, and Padding-left are attributes that need no explanation (see English literally).
Box-like model
Boundaries, fillers, and borders (see next page) are all parts of the human-known box-like model. The box model works like this: the middle is the element box (imagine the situation in your mind), enclosing the filler box, the border box and the bounding box in turn from inside to outside. Obviously, as follows:
Margin Box (Border box)
Border Box (Border box)
Padding box (filler box)
Element box (Elemental box)
There is no need to use all three of these peripheral "boxes", but if you can remember the box model, you can apply them to every element of the page.
This article links http://www.cxybl.com/html/wyzz/CSS/20121212/34928.html