CSS Box model

Source: Internet
Author: User

A Web page consists of many HTML elements, and each HTML element can be represented as a rectangular box, and the CSS box model describes the existence of these rectangular boxes.

Description of the MDN:

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the S Tandard CSS Basic Box Model. CSS determines the size, position, and properties (color, background, border size, etc) of these boxes.

Every box is composed of four parts (or areas), defined by their respective edges:the content edge, padding Edge, border Edge, and margin edge.

The CSS box model has four edges: margin edge, Border edge, padding edge, content edge (contents edge, Padding edge, Border edge, and margin edge), four edges divided into four regions from the inside Out: content area, padding area, border area, Margin areas (Content area, Padding Zone, Border region, and margin territory).

    • A content area is an area that contains the true content of an element.
    • The inner margin region (padding area) extends to the bounding rectangle that surrounds the padding. If the content area sets a background, color, or picture, these styles will extend to padding.
    • The border region (border area) is the area that contains the border, extending the inner margin area.
    • Margin Area ( margin Area) expands the border region with white space to separate adjacent elements.

Control their dimensions with CSS properties (width, height, padding, border, and margin).

CSS Box model

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.