Terminology translation
element : Element.
padding : padding, there is also information to translate it into padding.
border : The border.
margin : The outer margin, there are also sources to translate it as white space or margins.
At w3school, we refer to padding and margin as padding and margin together. The blank inside the border is the padding, and the blank outside the border is the outer margin, it is easy to remember :)
1 CSS padding
1.1
The CSS padding property defines the padding of an element. The padding property accepts length or percentage values, but negative values are not allowed.
For example, if you want all h1 elements to have 10px padding on each side, just do this:
h1 {padding: 10px;}
You can also set the padding on each side in the order top, right, bottom, left Padding, each side can use different units or percentage values:
h1 {padding: 10px 0.25em 2ex 20%;}
1.2 The single-sided padding property
also uses the following four separate properties to set the top, right, and Bottom and left padding:
padding-top
padding-right
padding-bottom
padding-left
You may have already thought of it, the effect of the following rule is exactly the same as the above shorthand rule:
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
<html>
<head>
<style type="text/css">
td {padding-bottom: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This table cell has bottom padding.
</td>
</tr>
</table>
</body>
</html>
2 CSS Borders An
element 's border is one or more lines that surround the element's content and padding. The CSS border property allows you to specify the style, width, and color of an element's border.
p.dotted {border-style: dotted}
2.1 The style of the border
Value description
none Defines no border.
hidden Same as "none". Except when applied to tables, where hidden is used to resolve border conflicts.
dotted defines a dotted border. Renders as a solid line in most browsers.
dashed defines a dashed line. Renders as a solid line in most browsers.
solid defines a solid line.
double defines a double line. The width of the double line is equal to the value of border-width.
groove Defines the 3D groove border. Its effect depends on the value of border-color.
ridge defines a 3D ridge border. Its effect depends on the value of border-color.
inset defines the 3D inset border. Its effect depends on the value of border-color.
outset defines the 3D outset border. Its effect depends on the value of border-color.
inherit specifies that border styles should be inherited from the parent element.
2.2 Defining a single-sided style
If you want to set the border style for one side of the element box, instead of setting the border style for all 4 sides, you can use the following single-sided border style properties:
border-top-style border-right-style border-bottom-style border-left-style
2.3 Defining multiple styles
You can define multiple styles for a border, for example: p.aside {border-style: solid dotted dashed double; } The above rule defines four border styles for paragraphs with class named aside: a solid line border, a dotted right border, a dashed bottom border, and a double left border.
2.3 The width of the
border You can specify the width of the border through the border-width property.
p {border-style: solid; border-width: 5px;}
or:
p {border-style: solid; border-width: thick;}
defines the width of one side
You can set elements in the order top-right-bottom-left border-style :
p {border-style: solid; border-width: 15px 5px 15px 5px;}
The above example can also be shortened to (this is called value copying):
p {border-style: solid; border-width : 15px 5px;} (the first 15 means top and bottom, the second 15 means left and right)
You can also set the width of each side of the border separately through the following properties:
border-top-width
border-right-width
border-bottom-width
border-left-width
2.3 Border Color
2.3.1 Setting the border color is very simple. CSS uses a simple border-color property that accepts up to 4 color values at a time.
Any type of color value can be used, such as named colors, but also hexadecimal and RGB values:
p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) # 909090 red;
}
Value description
color_name Specifies the color value of the border color (eg red) of the color name.
hex_number specifies the border color whose color value is a hexadecimal value (eg #ff0000).
rgb_number specifies the color value of the border color of the rgb code (eg rgb(255,0,0)).
transparent Default value. The border color is transparent.
inherit specifies that the border color should be inherited from the parent element.
2.3.2 Defining single-edge color
There are also some single-edge border color properties. They work the same way as the one-sided style and width properties:
border-top-color
border-right-color
border-bottom-color
border-left-color
3 CSS margins
The white space surrounding an element's border is the margin. Setting margins creates extra "white space" outside the element.
The easiest way to set margins is to use the margin property, which accepts any length unit, percent value, or even negative value.
3.1
The easiest way to set margins is to use the margin property.
The margin property accepts any length unit, which can be pixels, inches, millimeters, or em. The following declaration sets a 1/4 inch wide margin on each side of the h1 element: h1 {margin : 0.25in;}
The following example defines different margins for each of the four sides of the h1 element, using the lengths used The unit is in pixels (px):
h1 {margin : 10px 0px 15px 5px;}
is the same as the padding setting, the order of these values is from the top margin (top) and rotated clockwise around the element:
margin: top right bottom left
In addition, you can set a percentage value for margin:
p {margin : 10%;}
3.2 One-sided margin properties
You can use any of the following properties to set only the corresponding upper margin without directly affecting all others Margins:
margin-top
margin-right
margin-bottom
margin-left