Css box)

CSS box)

First of all, it should be clear that the box attribute is not in CSS. The CSS box consists of the following parts:

Content, padding, border, and margin ). The content of the box is mandatory, and the padding, border, and border are optional.

From the outside to the inside of the box:

• Margin
• Border
• Padding gap (also known as Patch)
• Content (content, such as text and images)

CSS margin attribute (margin)
Is used to set the distance between the edge of an element's space and adjacent elements.

The CSS border attribute (Border) is used to set the edge of an element.

The CSS gap attribute (padding) is used to set the distance from the element content to the element border.

The CSS background attribute refers to the content and padding areas.

The width and height in the CSS attribute refer to content
The width and height of the region.

Next we will introduce several attributes of the box one by one.

CSS border (Border) Border style attribute (border-style)

This attribute is used to set the style of the top, bottom, and left borders. Its value is as follows:

• None (no border, no matter how large the Border width is)
• Dotted (Dot-line Border)
• Dashed (broken line Border)
• Solid (straight-line Border)
• Double (double-line Border)
• Groove (groove Border)
• Ridge (spine Border)
• Inset (border with embedded effects)
• Outset (border of the protruding effect)

Border Width attribute (border-width)

This attribute is used to set the width of the top, bottom, and left borders. Its value is as follows:

• Medium (default)
• Thin (finer than medium)
• Thick (thicker than medium)
• Length unit value. You can use absolute length units (cm, mm, in, pt, pc) or relative length units.
  (Em, ex, px ).

Border color attribute (border-color)

This attribute is used to set the color of the top, bottom, and left borders. Example:

. D5
{Border-color: gray; border-style: solid ;}

Border attributes (Border)

This attribute is a quick and comprehensive method of border attributes. It contains border-width,
Border-style and border-color. Example:

. D1 {border: 5px solid
Gray ;}

Single border property

The top, bottom, and left borders can be set in a uniform way or separately.

Set the upper border attribute. You can use border-top, border-top-width,
Border-top-style, border-top-color.

Set the bottom border attribute. You can use border-bottom, border-bottom-width,
Border-bottom-style, border-bottom-color.

Set the left border attribute. You can use border-left, border-left-width,
Border-left-style, border-left-color.

Set the upper border property. You can use border-right, border-right-width,
Border-right-style, border-right-color.

The following code:

.box {   background-color: #EEFAFF;   width: 30%;   float: left;   border: 1px solid #000000;   }

In border: 1px solid
#000000; in a sentence, we specify three attribute values for border, which are equivalent to the following CSS statement:

border-style:solid;border-color:#000000;border-width:1px;

In fact, some attributes in CSS support such writing. The following is boxhead.
Add a one-pixel dotted line bottom border to the div. The modified code is as follows:

.boxhead {font-size: 14px;font-weight: bold;background-color: #AEC6FD;border-bottom:1px dashed #000000;text-align: center;width: 100%;color: #FFFFFF;}

The above example only uses two borders. Let's take a look at the borders of several other styles.

<P
> & Nbsp; </p>

<P> </p>

<P> </p>

<P> </p>

<P> </p>

<P> </p>

CSS fill attribute (padding) or gap attribute

The fill property defines the distance between content and border (border,

CSS gap property

The gap attribute (padding) is used to set the distance from the element content to the element boundary.

Left gap attribute (padding-left)

This attribute is used to set the width of the Left gap. Example:

. D1 {padding-left: 1 cm}

Padding-Right)

This attribute is used to set the width of the right gap. Example:

. D1 {padding-right: 1 cm}

Padding-top)

This attribute is used to set the width of the upper gap. Example:

. D1 {padding-top: 1 cm}

Lower gap property (margin-bottom)

This attribute is used to set the width of the gap. Example:

. D1 {padding-bot: 1 cm}

Padding)

This attribute is a quick and comprehensive method for setting the gap width. You can use this attribute to set the gap between top, bottom, and left.

You can set the same width for the gap between top, bottom, and left. Example:

. D1 {padding: 1 cm}

You can also set the gap separately. The order is top, right, bottom, left. Example:

. D1 {padding: 1 cm 2 cm 3 cm 4 cm}

The above Code indicates that the upper gap is 1 cm, the right gap is 2 cm, the lower gap is 3 cm, and the left gap is 4 cm.

CSS margin attribute (marging)

The margin attribute is used to set the distance between the edge of the space occupied by an element on a page and adjacent elements.

Left margin property (margin-left)

This attribute is used to set the left margin width. Example:

. D1 {margin-left: 1 cm}

Top margin attribute (margin-top)

This attribute is used to set the width of the top margin. Example:

. D1 {margin-top: 1 cm}

Bottom margin attribute (margin-bottom)

. D1 {margin-bot: 1 cm}

Margin property (margin)

This attribute is a quick and comprehensive method for setting the margin width. You can use this attribute to simultaneously set the top, bottom, and left margins.

You can set the same width for the top, bottom, and left margins. Example:

. D1 {margin: 1 cm}

You can also set the margins respectively. The order is top, right, bottom, left. Example:

. D1 {margin: 1 cm 2 cm 3 cm 4 cm}

The code above indicates that the top margin is 1 cm, the right margin is 2 cm, the bottom margin is 3 cm, and the left margin is 4 cm.