CSS practical tutorial 3

12. Control the BOX style
A style sheet defines a container BOX that stores all the operable styles of an object. It includes four aspects: object itself, border blank, object border, and object gap.
CSS_1.gif ">
For a better understanding of the meaning and relationship between these attributes, see the following figure:
1. Blank border (MARGIN)
As shown in the figure, it is located at the outermost layer of the BOX model, including four attributes.
The formats are as follows:
· Margin-top: margin on top
· Margin-right: margin on the right
· Margin-bottom: margin at the bottom
· Margin-left: left blank distance
The blank distance can be represented by numbers with length units.
If you use the simplified margin method of the preceding attributes, you can add four consecutive numbers with length units, to represent margin-top, margin-right, margin-bottom, and margin-left, respectively. Separate the numbers with spaces.
2. Object BORDER (BORDER)
As shown in the figure, seven attributes are included between the border space and the object space.
The formats are as follows:
· Border-top: top border width
· Border-right: right border width
· Border-bottom: bottom border width
· Border-left: width of the left border
· Border-width: width of all borders
· Border-color: border color
· Border-style: border style parameters
Border-width can be used to set the width of all borders at a time. When border-color is used to set the color of the four border borders, four colors can be written consecutively and separated by spaces. The Borders set in the preceding sequence are in the order of border-top, border-right, border-bottom, and border-left.
Border-style is slightly more complex than other attributes, because it also includes parameters of multiple Border styles:
· None: no border.
· Dotted: The border is a dotted line.
· Dashed: The border is a long and short line.
· Solid: The border is solid.
· Double: The border is a double line.
· Groove: displays 3D borders with different effects based on the color attribute.
· Ridge: displays 3D borders with different effects based on the color attribute.
· Inset: displays 3D borders with different effects based on the color attribute.
· Outset: Display 3D borders with different effects based on the color attribute
3. Object gap (PADDING)
As shown in the figure, it is located between the object border and the object, and contains four attributes.
The basic format is as follows:
· Padding-top: top gap
· Padding-right: right gap
· Padding-bottom: bottom gap
· Padding-left: left gap
Similar to MARGIN, PADDING can also use padding to set all object gaps at a time. The format is similar to MARGIN and will not be listed one by one.