CSS box Model Diagram and graphic explanation

Source: Internet
Author: User
When I first came to the web, when I was in college, the first page I wrote was the landing page, which was the layout of the table. After contacting the CSS, it is used p+css layout, realizes the separation of performance and structure, very flexible. Although I have been exposed to the layout of CSS, but not often used, resulting in a lot of things have been forgotten. and recently in the CSS layout, I would like to record here, as their own study notes.

CSS box model is a core concept in CSS. In the Web page we can think of all the elements of the page as a box, a box including margin, border, padding, and the content of four parts, such as.

The following is an explanation of the effect of these four parts, in turn, from outside to inside.

    • Margin (margin): Represents the margin of this element with other elements, and it is important to note that if the value of margin is set by two adjacent elements, the maximum value will prevail. such as two upper and lower adjacent p, the above P set margin:30px, the following P set margin:50px, then the last two elements of the interval will not be 30+20=50px, but will be 30px.

    • Border (border): Represents the border of this page element, but the border is set size, background (color or picture), style (implement or dashed lines, etc.).

    • Padding (padding): represents the distance between the element content and the bounding rectangle. It can be referred to as the element's left white.

    • Content: Represents the content area of an element, such as the size of the text.

Where the margin, border, padding, can be applied to the upper and lower left and right four edges of the element, or can be applied to each individual edge. In particular, the margin can also be set to a negative value, in some special cases, it is necessary to use the margin is negative.

Generally we set an element width and height, which is generally the width and height of the padding+content area, not including margin and border.

When I set the background color of the element, the background is applied only to the area within the element's bounding rectangle, which is padding+content, and the background color of the margin and border area is not changed.

An instance is shown below. The code is as follows:




The effect is as follows:

Related Article

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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