Home > Developer > Web Develop

The box model in CSS

Source: Internet
Author: User
Tags border color dashed line
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The CSS box model describes some rectangular boxes, which are used to represent elements in the document tree and are positioned according to the visual formatting model.

1. Size of the box

Each box has a content area (such as text, images, etc.) and an optional padding, Borde, margin area that surrounds the content area. The size of these zones is determined by the properties defined below. The interrelationships between these regions and the terms associated with margin, border and padding.

Margin, border, and padding can be split into top, right, bottom, and left segments, for example, the "LM" in the left margin, "RP" for the left-padding, and "TB" for the top Border and so on.
As the perimeter of the four regions (content, padding, border, and margin) is called the Boundary (edge), each box has four boundaries:

Content edge, or inner edge
The content edge surrounds the rectangle that is determined by the width and height of the box, and this rectangular area usually depends on the element's rendering content. The four content sides determine the box's content box.
Padding Edge
Padding edge surrounds the padding area of the box. If the width of the padding is 0, the padding edge is the same as the content edge. The four padding sides determine the box's padding box.
Border Edge
Border edge surrounds the border area of the box. If the width of the border is 0, the border edge is the same as padding edge. The four border sides determine the box's border box.
Margin edge, or outer edge
Margin edge surrounds the margin area of the box. If margin is 0 wide, margin edge is the same as border edge. The Margin box of the box is determined by the four margin sides.

Each boundary can be split into top,right,bottom and left edges.

The content area (content width and content height) of a box depends on the following factors: the element that generates the box is the width and height properties that are set, whether the box contains text or other boxes, whether the box is a table, and so on.

The background style of the Content,padding,border area is specified by the element's background attribute, and the background of the margin area is always transparent.

2. Examples of margin,padding, and border

This example shows how margin,padding and border directly interact with each other.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" ><Html><Head><Title>examples of margins, padding, and borders</Title><STYLEType="Text/css" > UL {Background:yellow;Margin12px12px12px12px;Padding3px3px3px3px;/* No borders set */}LI {Color:white;/* Text color is white */Background:blue;/* Content, padding'll be blue */Margin12px12px12px12px;Padding12px0px12px12px;/* Note 0px padding Right */List-style:none/* No glyphs before a list item *//* No borders set */}LI. withborder {border-style:dashed;Border-width:medium;/* sets border width on all sides */border-color:lime;} </style> </HEAD > <body> < ul> <li>first element of list <li class= " Withborder ">second element of list is a bit longer to illustrate wrapping. </ul> </ Body></HTML>

This code will eventually produce a UL element and two Li child elements in the document tree.
In the following two graphs, the first diagram shows the style that the above code will eventually display. The second picture shows the relationship between the margin,padding,border of the UL element and its sub-Li elements.

Description

    • The content width of each Li box is calculated from top to bottom, and the containing block of each Li box is generated by the UL element.
    • The height of each Li box's margin box is measured by the content height of the box plus the upper and lower padding, plus the upper and lower border, plus the upper and lower margin calculations. Note that the vertical margin between the Li boxes is merged (collapse).
    • The right padding of each Li box is set to 0 by the Padding property. This effect is clearly shown in the second picture.
    • The margin of the Li box is transparent, so we see the background color yellow of the UL element padding and content area.
    • The second Li element specifies the dashed border through the Border-style property.
3. Margin properties: Margin-top,margin-right,margin-bottom,margin-left and Margin

The margin property specifies the width of the margin area of a box. The margin property sets a margin of four edges, while the other margin properties specify only one side. These properties can be applied to all elements, but the vertical margin has no effect on the irreplaceable inline element (non-replaced inline elements).
The value types for these properties are as follows:
< absolute value >
With a fixed width
< percent >
Calculates the percentage based on the width of the containing block of the box. Note that this applies equally to Margin-top and Margin-bottom. If the width of the containing block is determined by this element, then in CSS2.1, the result is undefined.
Auto
Automatic
Margin property values can be negative, but this may have specific implementation limitations.

Margin-top,margin-right,margin-bottom and Margin-left Specify the top, right, bottom, and left margins of the box. These properties can be applied to all elements except the table display type (except Table-caption,table and inline-table). Margin-top and Margin-bottom do not work on non-replaceable inline elements.
The margin property is shorthand for the above four properties, which can be set at the same time. If a value is specified, it is applied to all edges. If two values are specified, the first value sets top and bottom margin, and the second value sets left and right margin. If three values are set, the first value sets the top margin, the second value sets the left and right margin, and the third value sets the bottom margin. If four values are set, then Top,right,bottom and left margin are set in turn.

3.1 Merging margin

In CSS, the adjacent margin of two or more boxes (which may or may not be a brother box) is merged into a single margin. Margin merges are also called collapses (collapse).

Adjacent vertical margin merges, in addition to:

    • The margin of the box of the root element is not merged
    • If the top and bottom margin of the clearance element are adjacent, the margin of the box is merged with the margin of the next sibling box, but the merged margin is not merged with the bottom margin of the parent block.

Horizontal margin is never merged.

Two margin adjacent, when and only if:

    • Belong to a block-level box in the normal document flow in the same block formatting context
    • No row box (line box), no purge (clearance), no padding, no border separation. (Note that some zero-height line boxes will be slightly, see visual formatting model)
    • All belong to the edge of the vertical adjacent box, which means:
      • Top margin of a box and the top margin of the child's box in the first stream of the box
      • The box's bottom margin and the top margin of the box's next flow inside the brother box
      • The last child the bottom margin of the box and the bottommargin of its parent box (if the height of the parent box is automatically calculated)
      • The top and bottom margin of a box, provided the box does not have a new block formatting context, the computed min-height is 0,height to 0 or auto, and there are no child elements in the normal document stream.

If a sub-margin of a merged margin is adjacent to an other margin, then the merged margin is also considered to be adjacent to the margin.

Adjacent margin may be generated by elements that are not adjacent to each other or that are not mutually ancestor descendants.
The above sentence indicates:

The margin of the
  • floating box is not merged with the margin of any other box, even if the margin of the box and the sub-box within its flow are not merged.
  • The margin of the element that establishes the new block formatting context (such as floating elements and overflow values that are not visible) is not merged with the marign of the child elements within their flow.
  • The margin of the box that is absolutely positioned is not merged, even if the box with their flow is not merged. The margin of the block box in the
  • line is not merged, even if the box is not merged with their flow.
  • The bottom margin of a block-level box in a stream is always merged with the top margin of the block-level sibling box in its next stream, unless the sibling box is cleared (clearance). The top margin of a block-level element within the
  • Stream is merged with the top margin of the block-level child element in its first stream, provided the box does not have a top border, top padding, and the child element does not have a purge applied.
  • a bottom margin with a height of auto,min-height 0 in a stream block-level box is merged with the bottom margin of the block-level sub-box within its last stream, provided that the box does not have bottom padding, Bottom border and the bottom margin of the sub-box are not merged with the other top margin where the purge was applied.
  • The margin of a box itself is merged, provided the box's Min-hieght property is set to 0, the box has no top or bottom border, no top or bottom padding, It has a height of 0 or auto, and it does not contain any line boxes, and all of the margin of the stream's own box is merged.

When two or more margin merges are, the width of the merged margin is the maximum value for all the merged widths. If the value of margin is negative, then the final merge margin absolute value will be the maximum positive minus the negative. If all margin is negative, then the final merge margin absolute value will be 0 minus the maximum negative result.

If the top of a box is adjacent to the bottom margin, then margin may pass directly through it. In this case, the position of the element depends on its relationship to the element with which it has a margin merge:

    • If the margin of an element is merged with the top margin of its parent element, the top border of the element is the same as the parent element.
    • Otherwise, either the parent element of the element is not participating in the margin merge, or the parent element has only bottom margin participating in the merge, then the top border edge of the element will be the same as the top border edge when it has a non-0 bottom border.

Note that the position of the element that is merged through (collapsed through) has no effect on the position of the element where he is merging the margin, and only the position of the top border edge is referenced when the element's child elements are laid out.

4. Padding properties: Padding-top, Padding-right, Padding-bottom, padding-left and padding

The Padding property specifies the width of the padding area of the box. The "Padding" property sets the padding of four edges, while the other four properties set the padding of a specific edge.
The values for the above properties are as follows:
< absolute value >
With a fixed width
< percent >
Calculates the percentage based on the width of the containing block of the box. Note that this applies equally to Padding-top and Padding-bottom. If the width of the containing block is determined by this element, then in CSS2.1, the result is undefined.

Unlike the margin property, the value of the Padding property cannot be negative.

Padding-top,padding-right,padding-bottom,padding-left These four attributes specify the top, right, bottom, and left padding of the box, which can be applied in addition to Table-row-group, Table-header-group, Table-footer-group, Table-row, Table-column-group and table-column all elements.

Padding is a shorthand for the above four attributes, and if a value is specified, it is applied to all edges. If you specify two values, the first value sets top and bottom padding, and the second value sets left and right padding. If three values are set, the first value is set to top padding, the second value is set to left and right padding, and the third value is set to bottom padding. If four values are set, then Top,right,bottom and left padding are set in turn.

5. Border Properties

The Border property specifies the width, color, and style of the box's border area. These properties can be applied to any element.

5.1 Border Width: border-top-width, Border-right-width, Border-bottom-width, Border-left-width and Border-width

The Border Width property specifies the width of the border area. The values are as follows:
Thin
Thin border
Medium
Medium width border
Thick
Thick border
< absolute value >
The thickness of the border is determined by the specified value and cannot be negative.
The exact size of the first three values is determined by the UA, but must be full the following condition:

thin <= medium <= thick

Border-top-width, Border-right-width, Border-bottom-width, border-left-wdith four attributes specify the border width of the top, right, bottom, and left four sides, respectively. They can be applied to any element.
Border-width is a shorthand for the above four attributes, and if a value is specified, it is applied to all edges. If two values are specified, then the first value is set to top and bottom border width, and the second value sets left and right border width. If three values are set, then the first value is set to top border width, the second value is set to left and right border width, and the third value is set bottom border width. If four values are set, set Top,right,bottom and left border width in turn.

5.2 Border Color: border-top-color, Border-right-color, Border-bottom-color, Border-left-color and Border-color

The Border Color property specifies the color of the box border.
The border Color property value is:
< color >
The specific color value
Transparent
The border is transparent, but remains wide.

Border-top-color, Border-right-color, Border-bottom-color, border-left-color specifies the color of the top, right, bottom, and left four borders, which can be applied to all elements.
The Border-color property is a shorthand for the above four properties, and its value is the same as the border-width of the four properties.

If the border color of an element is not specified, then the UA may use the color specified by the element's color property as the color of the border.

5.3 Border Style: Border-top-style, Border-right-style, Border-bottom-style, Border-left-style and Border-style

Border Style properties Specify the style of the box border lines (solid, double solid, dashed, and so on). The value of the property is as follows:
None
There is no border, that is, the width of the border is 0.
Hidden
Same as none.
Dotted
A border is a series of points.
Dashed
The border is a dashed line.
Solid
The border is a solid line.
Double
The border is a double solid line, and the width between the two solid lines plus the value of border-width is equal to.
Groove
The border looks like it's embedded in the canvas (the border is sunken).
Ridge
As opposed to groove, the border looks like it is convex (border bulge effect).
Inset
The border makes the box appear as if it were embedded in the canvas (box sunken effect).
Outset
Similar to the effect of the inset, the frame makes the box look convex (box-raised effect).
All borders are drawn above the background of the box, and the color of the border depends on the border color property of the element.

Border-top-style, Border-right-style, Border-bottom-style, Border-left-style, right, bottom, and left four border styles that can be applied to all elements.
The Border-style property is a shorthand for the above four properties, and its value is the same as the border-width of the four properties.

Because the initial value of the border style is none, the box's border is not visible if the border style is not set.

5.4 Shorthand Border Properties: Border-top, Border-right, Border-bottom, Border-left and border

Border-top, Border-right, Border-bottom, and Border-left properties are shorthand for box widths, styles, and colors on the box, right, bottom, and left. Such as:

h1 { border-bottom: thick solid red }

The attributes that are omitted will use their initial values.

H1 { border-bottom: thick solid }

The border property can set the width, color, and style of the box's four borders at the same time. Unlike the margin and padding properties, the border property cannot set a different value for four borders.

Consider the following style,

blockquote {  border: solid red;  border-left: double;  color: black;}

The color of the left border is black, and the color of the other borders is red. Because Border-left overrides the border property's setting on the left border, Border-left does not set the bounding color, all colors specified using the Color property.

6. Box model of inline elements in bidirectional contexts

For each row box, the UA must set the margin, border, and padding for these inline boxes in visual order (non-logical order).
When the element's Direction property value is ltr, the first line box of the element's leftmost inline box has left margin,left border and ieft padding, and the rightmost row box in the last row box has right padding, Right border and right margin.
When the element's Direction property value is RTL, the element's first line box has the right-most inline box in the left-hand margin,right, and the leftmost row box in the last row box has a border, Left border and left margin.

The box model in CSS

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
search box html css beautiful div box css change css in php background effects in css vmware vdi in box citrix vdi in box search box in php
Related Article
The difference between a JSON object and a JSON string
HTTP returns the difference between 301 and 302 in the status...
About HTTP return Codes 301, 302 differences with SEO

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More