The box model consists of four elements
Content area (content) border (border) padding (padding) outer margin (margin)
The elements that affect the size of the box: content area, border, padding. Margins do not affect the size of the box
1. Content area (content) All sub-elements and text content in the element are arranged in the content area
set the width of the content area
Height sets the height of the content area
2. Border: The border belongs to the edge of the box, the inside of the border belongs to the inside of the box, and the outside of the border is the outside of the box.
To set the border, you must specify three styles: color, size, and style.
border-color: ; Set the color of the border
For example, set the border color of a div to red
The effect is as shown in the figure:
(1), There is a default value, and the default color is black
(2) You can write multiple colors separated by spaces
4 upper right and lower left
3 upper, left, right
2 up and down
1 up and down
You can also set the color of one side of the border
Border-xxx-color xxx refers to a certain side of it, the optional values are top right bottom left
border-width: ; Set the size of the border
(1), Default value The default value is about 1-3px
(2), it can also be followed by multiple values separated by spaces
4 upper right and lower left
3 pcs up, left, right, down
2 up and down
1 up and down
You can also set the size of one side of the border
Border-xxx-width xxx refers to a certain side of it, the optional values are top right bottom left
border-style: ; Set the border style
(1), default value none
(2), solid solid line
dashed
dotted dotted line
Border abbreviation: color, size, style, arranged in any order, no fixed order
Generally, we use the most abbreviated form
For example, set the border size of the div box to 2px, the color to red, and the line style to dotted line.
div{
width: 200px;
height: 200px;
border: 2px red dashed;
}The effect is as shown in the figure:
3. Padding: Padding is the distance from the content area to the border
In fact, the form of padding and the form of border are different but serve the same purpose.
Padding-top top padding
padding-right right padding
padding-bottom bottom padding
padding-left left padding
But generally speaking, we still prefer abbreviations
padding：
It can also be followed by multiple values, and the rules are the same as the rules for borders. You can see the detailed introduction above.
For example, we write 4 values later
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
padding: 10px 20px 30px 40px;
}
.box2{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>The effect is as shown in the figure:
The order of padding values is top right bottom left
If there are three values, the order is top, left, and bottom (the second value is used for both left and right)
If there are two values, the order is up, down, left and right.
A value means that it is present on all sides
4.margin (margin)
The margin shorthand property sets the margin properties of all current or specified elements in a single declaration. This attribute can have 1 to 4 values.
The margin property accepts any length unit, percentage value, or even negative value.
The margin property can individually change the top, bottom, left, and right margins of an element. It is also possible to change all properties at once.
Like padding, margin also has a shorthand method. We can use the margin attribute to set margins in four directions. In actual programming, we often use the efficient and concise writing method of margin to program.
For example, we want the left margin of the box to be 10px
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
padding: 10px 20px 30px 40px;
margin-left: 10px;
}The effect is as shown in the figure:
It is obvious that the left margin has become 10px.
Other writing methods are similar to padding!