CSS Grammar Manual (iii) text fill, border, boundary and position attributes (i)

css| Syntax

One, Box fill properties

1, Padding-bottom
Padding-left
Padding-top
Padding-right

function : Each container has a border, which sets the distance between the border and the elements inside the box.
value :
Length-Sets the relative or absolute value. Specify the unit of measure after the number as follows: mm, CM, in, PT, PX, PC, ex, EM. The EM and ex settings produce a font size relative to the parent font.
Percent-sets the border as a percentage of the parent element.
description : Fill values cannot use negative values, but they can be decimal.
Example

2, padding

function : is a shorthand property for setting the spacing of the top, bottom, left, and right border and content elements.
value : Previous.
Note : A single value can be used to fill each edge equidistant; If you use two values, the first value is used to fill up and down, the second value is used for the left and right padding, and if you use three values, the top padding, the left and the bottom padding, and, if you use four values, the left padding. You can mix numeric types.
Example

Two, Box border properties

1, Border-top
Border-bottom
Border-right
Border-left

function : These four properties are shorthand properties, respectively, set up, down, right, left border properties. By default, borders do not have style settings.
value : Total three border properties
Border-width: Value is thin, medium, thick or specified length.
Border-style: Sets the shading used to decorate the border. You can set the following styles: None, dotted,doshed, solid, double, groove, Ridge, inset, outset.
Border-color: Sets the border color.
Example

2, Border-top-width
Border-bottom-width
Border-right=width
Border-left-width

function : Set the thickness of each border individually.
value :
Thin-thin border.
Medium-Medium line width.
Thick-thick line.
Length-Sets the border width in relative or absolute units.
Example

3, Border-width

function : The Shorthand property allows you to set the width of four borders at the same time.
value :
Thin-thin border.
Medium-Medium line width.
Thick-thick line.
Length-Sets the border width in relative or absolute units.
Note : See padding description.
Example :

Border properties

4, Border-color

function : Shorthand property, set the color value of the four border.
Value: You can use a color name or an RGB value. If you specify a single color, the four borders are displayed as this color, and if two colors are specified, the order is up or down, and if three colors are specified, the order is up, down, or down, and if four colors are specified, the order is up, right, down, and left.
description : The color name is as follows
Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
For RGB values, three methods can be used to specify
#rrggbb; RGB (R,G,B); RGB (r%,g%,b%)
Example :

Border color

5, Border-style

features : for displaying borders and specifying border styles.
value :
None-no borders are displayed, default values
Dotted-point line
Dashed-Virtual line
Solid-Solid Line
Double-two-wire
Groove-3d into line
Ridge-3d Ridge Shape Line
Inset-Makes the page feel a sense of immersion
Outset-make the page surface
Description : Not all browsers can display styles such as ridge, inset, outset, and some browsers draw Cheng Shi lines for all borders.

Example1

Example2

6, border

features : Shorthand properties, setting all border properties.
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 shorthand properties, each setting can take only one value, and this property is applied evenly to the sides of the box.
Example :

This is A Example