CSS Syntax Manual (3) Text Fill, Border, Boundary and Position Properties (1)

1. Box padding properties

1. padding-bottom
padding-left
padding-top
padding-right

Function: Each container has a border. These properties set the distance between the border and the elements in the box.
Value:
Length - Set relative or absolute value. Specify the unit of measurement after the number as follows: mm, cm, in, pt, px, pc, ex, em. The em and ex settings produce font sizes relative to the parent font.
Percent - Set the border as a percentage of the parent element.
Note: The fill value cannot use negative values, but it can be a decimal.
Example

2. Padding

Function: It is a shorthand attribute, used to set the spacing between the border and content elements in the top, bottom, left, and right directions.
Value: Same as before.
Note: Use a single value to fill each edge equally; if you use two values, the first value is used for top and bottom filling, and the second value is used for left and right padding; if you use three values, it is assigned to the top filling , left and right padding and bottom padding; if four values ​​are used, they are used for top, right, bottom and left padding respectively. Numeric types can be mixed.
Example

2. Box border attributes

1. border-top
border-bottom
border-right
border-left

Function: These four attributes are abbreviated attributes, set up, down, respectively. Right and left border properties. By default, borders are unstyled.
Value: There are three border attributes
border-width: The value is thin, medium, thick or specified length.
border-style: Set the shading used to decorate the border. The following styles can be set: none, dotted, doshed, solid, double, groove, ridge, inset, outset.
border-color: Set border color.
Example

2. border-top-width
border-bottom-width
border-right=width
border-left-width

Function: Set the thickness of each border separately.
Value:
thin - thin border.
medium - Medium line width.
thick - Thick lines.
Length - Set the border width in relative or absolute units.
Example

3. border-width

Function: Abbreviation attribute, which can set the width of four borders at the same time.
Value:
thin - thin border.
medium - Medium line width.
thick - Thick lines.
Length - Set border width in relative or absolute units.
Instructions: See padding instructions.
Example:

4. border-color

Function: Abbreviation attribute, set the color value of the four borders.
Value: You can use color name or RGB value. If a single color is specified, all four borders will be displayed as this color; if two colors are specified, the order is top, bottom, left and right; if three colors are specified, the order is top, left, left, and bottom; if four colors are specified, then The order is up, right, down, left.
Instructions: The color names are as follows
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
For RGB values, there are three methods to specify
#rrggbb; rgb(r,g,b); rgb(r%,g%,b%)
Example:

5, border-style

Function: Used to display borders and specify border styles.
Value:
none - do not display the border, the default value
dotted - dotted line
dashed - dotted line
solid - solid line
double - double line
groove - 3D inset line
ridge - 3D ridged line
inset - enable The page has a sinking feeling
outset - makes the page have a floating feeling
Note: Not all browsers can display styles such as ridge, inset, and offset. Some browsers draw all borders as solid lines.

6. border

Function: Abbreviation attribute, set all border attributes.
Value:
border-width - value thin, medium, thick or specified length.
border-style - Values ​​none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color - Available color names or RGB values.
Note: Unlike other abbreviated attributes, each setting can only take one value. This attribute acts evenly on all sides of the box.
Example:

The above is the content of CSS Grammar Manual (3) Text Fill, Border, Border and Position Properties (1). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!