First, what is the CSS box model?
CSS box model, also known as CSS box model, which specifies, borders, and the way the elements outside the box processing element content, padding distance.
The innermost portion of the actual content of the frame element, the content is directly surrounded by padding. Padding presents background elements. Padding edge is the border. Outside the borders are margins, margins are transparent by default, and therefore will not block any subsequent elements.
Padding, margins and borders are optional, the default value is zero. However, many of the elements by the user agent style sheet margins and padding. The elements can be set to zero margin and padding to cover these browser style.
Second, the box model - the border (border): Border involves three points, respectively, border thickness, style, color.
The border: 2px solid red, meaning the thickness of 2px, solid line style, color is red.
On border attributes:
Third, the box model - padding (padding): Set a distance between the elements and the frame, is called padding.
padding define blank area between the border and the element content elements. You may set the length value and the percentage value, but does not allow the use of a negative value.
padding can be divided into four parts: top, bottom, left and right. These four attributes can write continuously can also be set separately.
td {
padding: 20px 10px 50px 50px;
}
Up, down, left and right four elements separate write:
td {
padding-top: 50px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 50px;
}
Fourth, the box model - boundary: a boundary that is the distance between the elements, i.e. the outer border, with a margin provided.
margin is also divided into four parts, i.e. a left upper right lower (margin-top / margin-right / margin-bottom / margin-left).
The same margin of four parts can write continuously.
p {
margin: 20px 50px 60px 30px;
}
Up, down, left and right four elements separate write: **
p {
margin-top: 20px;
margin-left: 30px;
margin-bottom: 60px;
margin-right: 50px;
}
Finally, I recommend a push in the front-end learning exchange group 685 910 553 Advanced ( front-end information-sharing ), no matter which direction you are on Earth,
whether you are welcome to work in a few years you settled in! (Within the group regularly offer free collection of some of the main group of free learning materials and books tidied face questions and answers document!)
If you have any objection to this article, then please write your comments in the article comments at.
If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles.