CSS Box model

Source: Internet
Author: User

PrincipleEditLet's talk about our web pages: content, padding (padding), Borders (border), borders (margin), CSS box patterns. These properties we can transfer it to our daily life in the box (box) to understand that the daily life of the box is a box that can be loaded, but also have these properties, so call it box mode. CharacteristicsEditImagine a box that has: margin (margin), border (border), padding (padding), content four properties; Let's look down at this box, it has up and down four sides, so each attribute in addition to the contents (content), All include four parts: up and down, the four parts can be set at the same time, can also be set separately; the padding may be understood as the distance between the contents of the box and the border, and the border has a thickness and color, the content is the middle of the box of things, the margin is the outside of the border automatically leave a blank. StructureEditContent is what is in a box, and padding (PADDING) is a bubble or other anti-seismic accessory that is afraid of damage to the contents of the box (BORDER), which is the box itself, and the border (margin). It is indicated that the box can not be stacked together when placed, to leave a certain gap to maintain ventilation, but also for easy removal. In web design, content often refers to text, pictures and other elements, but also can be small box (div nested), and real life in the box is different, the real life of things can not be larger than the box, or the box will be broken, and the CSS box is elastic, the inside of the box itself is larger than the maximum size, But it's not going to get damaged. Padding is only a width property, and each HTML tag can be considered a box. 2017-07-0217:52:32

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.