1. Border
div to set a border with a border thickness of 2px, a solid style, and a red color:
div{ border:2px solid red;}
1) border-style (border style) common styles are:
dashed (dotted line) | dotted (dotted line) | solid (solid line).
2) The color in border-color (border color) can be set to a hexadecimal color, such as:
border-color:#888;//Don't forget the pound sign in front.
3) The width in border-width (border width) can also be set to:
thin | medium | thick (but not very commonly used), most commonly used pixels (px).
Implement the settings of the other three-sided (top, right, left) borders:
border-top: 1px solid red;
border-right: 1px solid red;
border-left: 1px solid red; 2.-
width and height
defined in css (width) and height (height), refer to the content range within the padding.
So an element's actual width (the width of the box) = left border + left border + left padding + content width + right padding + right border + right border.
Example:
css code:
div{
width: 200px;
padding: 20px;
border:1px solid red;
margin:10px;
}
html code:
<body>
<div>text content</div>
</body>
The actual length of the element is: 10px+1px+20px+200px+20px+1px+10px= 262px
3. Padding (the relationship between the content and the border) The
distance between the element content and the border can be set, which is called "padding". Fill can also be divided into top, right, bottom, left (clockwise).
Example: div{padding:20px 10px 15px 30px;} div
{
padding-top:20px; padding- right
:10px;
padding-bottom:15px;
padding-left:30px; The padding is 10px;*/ div{padding:10px;} /*If the top and bottom padding is the same as 10px, the left and right are the same as 20px*/ div{padding:10px 20px;} 4. Border (the relationship between the border and the border) / *The distance between elements and other elements can be set using margins. The border can also be divided into top, right, bottom and left. */
div{margin:20px 10px 15px 30px;}
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
/*If the top, right, bottom and left margins are both 10px; */
div{ margin: 10px 20px;}
The difference between padding and margin, padding is in the border, and margin is outside the border.
div to set a border with a border thickness of 2px, a solid style, and a red color:
div{ border:2px solid red;}
1) border-style (border style) common styles are:
dashed (dotted line) | dotted (dotted line) | solid (solid line).
2) The color in border-color (border color) can be set to a hexadecimal color, such as:
border-color:#888;//Don't forget the pound sign in front.
3) The width in border-width (border width) can also be set to:
thin | medium | thick (but not very commonly used), most commonly used pixels (px).
Implement the settings of the other three-sided (top, right, left) borders:
border-top: 1px solid red;
border-right: 1px solid red;
border-left: 1px solid red; 2.-
width and height
defined in css (width) and height (height), refer to the content range within the padding.
So an element's actual width (the width of the box) = left border + left border + left padding + content width + right padding + right border + right border.
Example:
css code:
div{
width: 200px;
padding: 20px;
border:1px solid red;
margin:10px;
}
html code:
<body>
<div>text content</div>
</body>
The actual length of the element is: 10px+1px+20px+200px+20px+1px+10px= 262px
3. Padding (the relationship between the content and the border) The
distance between the element content and the border can be set, which is called "padding". Fill can also be divided into top, right, bottom, left (clockwise).
Example: div{padding:20px 10px 15px 30px;} div
{
padding-top:20px; padding- right
:10px;
padding-bottom:15px;
padding-left:30px; The padding is 10px;*/ div{padding:10px;} /*If the top and bottom padding is the same as 10px, the left and right are the same as 20px*/ div{padding:10px 20px;} 4. Border (the relationship between the border and the border) / *The distance between elements and other elements can be set using margins. The border can also be divided into top, right, bottom and left. */
div{margin:20px 10px 15px 30px;}
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
/*If the top, right, bottom and left margins are both 10px; */
div{ margin:10px;}
/*If the upper and lower borders are the same as 10px, and the left and right borders are the same as 20px*/div{ margin: 10px 20px;}
The difference between padding and margin, padding is in the border, and margin is outside the border.