Starting from Basics: A practical tutorial on CSS (iii)

css| Tutorial

12. Control the style of box

The stylesheet provides a container box that will store all the operable styles of an object. Includes four aspects of the object itself, border whitespace, object borders, and object clearance.

For a better understanding of the meaning of these attributes and the relationship between them, see the following illustration:

1. Border Blank (MARGIN)

The outermost layer of the box model, as shown in the figure, includes four properties.

The formats are as follows:

margin-top: Top blank distance

margin-right: Right blank distance

margin-bottom: Bottom blank distance

margin-left: Left blank distance

Blank distances can be represented by a number with a length unit.

If you margin by using the simplified method of the above property, you can add four consecutive digits with length units to represent the Margin-top, Margin-right, Margin-bottom, Margin-left respectively, separated by a space in the middle of each number.

2. Object Border (BORDER)

As shown in the figure, between the border whitespace and the object gap, seven properties are included.

The formats are as follows:

border-top: Top Border width

border-right: Right Border width

border-bottom: Bottom Border width

Border-left: Left Border width

border-width: All border widths

border-color: Border color

border-style: Border Style parameters

Where border-width can set all the width of the border at once, border-color the color of the four sides of the border, you can write four colors consecutively, separated by a space. The contiguous set of borders is in the order of Border-top, Border-right, Border-bottom, Border-left.

Border-style is slightly more complex than the other attributes because it also includes parameters for multiple border styles:

None: No border.

dotted: The border is a dotted line.

dashed: The border is a short line.

Solid: The border is a solid line.

Double: The border is two lines.

Groove: Displays a 3D border with different effects based on the Color property

Ridge: Displays a 3D border with different effects based on the Color property

inset: Displays a 3D border with different effects based on the Color property

outset: Displays a 3D border with different effects based on the Color property

3. Object Gap (PADDING)

As shown in the figure, it is located between the object border and the object, including four properties.

The basic format is as follows:

padding-top: Top Clearance

Padding-right: Right Clearance

Padding-bottom: Bottom Clearance

Padding-left: Left Clearance

Similar to margin, padding can also use padding to set all object gaps at once, and the format is similar to margin, no longer enumerated.

13. Show control style

The basic format is as follows:

Display: Parameters

Parameter value range:

block (default): Wrapping lines before and after objects

Inline: No wrapping before and after the object.

List-item: Wrapping lines before and after objects, adding bullets

None: No display

14. Blank control style

The basic format is as follows:

The whitespace property determines how spaces within an element are handled.

White-space: Parameters

Parameter value range:

Normal: Replace multiple spaces with one to display

Pre: Faithfully press ENTER to display spaces

NoWrap: No Line wrapping

Note, however, that Write-space is also a block-level attribute.

--End of series--