Home > Developer > Web Develop
Any element of HTML can be viewed as a box (box) that can be combined with a real-world box to understand the following, and some of the words below should be easy-to-understand words that need to be recorded.
Basic situation
Each box has a content area, such as a pile of text in a box or a border of a picture, surrounded by padding area,border area with a certain width, and margin areas, and cotent Area (similar to the middle runway part of a middle line).
Each area is a certain width or height, for example, in the upper and lower side is occupied height, on both sides is occupied width. The edges we call edge (similar to the part of the line, in fact, there is no space, similar to the outermost meaning of area). The edge of the content area is called the content edge or the edge of the inner edge,padding area called the padding Edge,border area edge called the Border Edge,margin The edge of area is called Margin edge or outer edge.
Each box standard margin-Chinese called margin or outer filler, padding padding inside padding, border border Three, the most inside is our content area, the comparison of the image of the description can be seen:
The Margin,padding,border of the box can be divided into four directions, upper, lower, left, and right, such as LM on behalf of MARGIN,LB left BORDER,LP on behalf of left padding.
The above is a box model basic knowledge, but also the basic elements of the page CSS layout, margin,padding,border default space, the value is set by the user, relatively simple, the most important thing is the content area contents of the width of the high calculation, The height of the area, content, content height, the response width of the content wdith, not only about the size of their own site, but also about whether the future generations have enough sites to display, the main impact of the final results of the following factors:
Its width and height property, what we call the general width and height is the Content width,content height, note that even if the user CSS does not specify its value, it also has its own initial value auto, which is the most basic point.
Whether to include child element content, such as text or a box (either inline or block), that is, the possible width and height of the child element will affect the parent element;
The Display property value type, such as the table type, if the type of the inline calculation rules are not the same as the block;
And so on, the calculation of this piece is not within the scope of this article, this piece is also more complex, later will be dedicated to explain, the name tentative, any box of its width and height calculation.
It is also important to note that the background settings only affect the border area,padding area,content area, and the background of the margin area is always transparent.
Give me a chestnut.
<!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;margin:12px 12px 12px 12px;padding:3px 3px 3px 3px; }LI{Color: White;background:Blue;margin:12px 12px 12px 12px;padding:12px 0px 12px 12px;List-style:None}Li.withborder{Border-style:Dashed;Border-width:Medium;Border-color:Lime; } </STYLE> </HEAD> <BODY> <UL> <LI>I don't have border .<LIclass= "Withborder">s I have border</UL> </BODY></HTML>View Code
This is what Chrome will look like:
Interpret this result:
How CSS is used
Margin
Body {MARGIN:2EM}/ * All margins set to 2em */body {margin:1em 2EM}/ * top & bottom = 1em, right & L EFT = 2em */body {margin:1em 2em 3em}/* Top=1em, Right=2em, Bottom=3em, Left=2em */Description: One is shorthand for the meaning of the other is that the CSS has a priority, and ultimately the above is equivalent to the following effect:
body { margin-top:1em; Margin-right:2em; Margin-bottom:3em; Margin-left:2em; /* Copied from opposite side (right) */}It is important to note that, like the Width,height property, Margin-top and Margin-bottom cannot be applied to box with span class non-replaceable inline block level, where the application does not work.
Other properties such as Margin-right,padding,border are not restricted.
Padding
Shorthand order with margin, nothing else to say
Border
There's nothing to say.
Magical margin Merge effect
Margin or padding, how to choose?
If there is border plug a foot, including border words, in fact, is still very good choice, different choices, rendering out of the same appearance.
Margin can be negative, you can achieve similar to position positioning function, can take the content together to travel, padding can only be not less than 0.
Margin has no background, and padding is affected by the background property of the box.
Margin will merge, padding not.
These two can indeed achieve the same effect, there is a principle is that if it is involved with other box fighting turf, but also rely on margin, if you want to let their children live well, appear not so crowded panic, then use padding.
CSS basics in-depth box model
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
