What's margin?
The CSS margin property defines the space around the element. You can set the top, right, bottom, and left margins by using a separate property. You can also use the abbreviated outer margin property to change all the outer margins at the same time. --w3school
boundary, creating an extra blank area around the element. A "white space" usually refers to an area where other elements cannot appear and the parent element's background is visible. --CSS Authority Guide
I prefer to use the word "outer space" to explain margin (the same padding can be called "inner margin", but I just like to call padding "filler" or "leave White"), We can clearly understand that the most basic use of margin is to control the space around the elements, from the visual angle to achieve separate purposes.
Characteristics of margin
The margin is always transparent. Margin you can set the top, right, bottom, and left margins by using a separate property. namely: Margin-top, Margin-right, Margin-bottom, Margin-left.
The Margin-width value types for the outer margin are: auto | Length | Percentage. You can also use the abbreviated outer margin property to change all the outer margins at the same time: margin:top right bottom left; (eg:margin:10px 20px 30px 40px) memory is the memory of the elements just above the clockwise "up and down".
And the specification also provides the omitted numerical notation, basically is as follows:
1. If margin has only one value, the upper right and lower left margin are the same value. For example: margin:10px; is equal to margin:10px 10px 10px 10px;
2. If the margin has only two values, the first value represents the top and bottom margin values, and the second value is the left and right margin value. For example: margin:10px 20px; is equal to margin:10px 20px 10px 20px;
3. If the margin has three values, the first value represents the margin value, the second value represents the left and right margin value, and the third value represents the lower margin value. For example: margin:10px 20px 30px; is equal to margin:10px 20px 30px 20px;
4. If the margin has four values, the four values correspond to the four margin values on the lower right and left side respectively. Example: margin:10px 20px 30px 40px;
In practical applications, individuals do not recommend the use of three-value margin, one is easy to remember, the second is not easy to modify later, a start if written margin:10px 20px 30px; In the future, the requirement changes to 10px, right 30px, down 30px, left 20px, You have to still have to take this margin apart for margin:10px 30px 30px 20px; laborious and not flattering, as the first honest written margin:10px 20px 30px 20px; come true, Don't increase the cost of future development in order to save two bytes now.
Vertical margin Merge problem
Don't be intimidated by the noun above, simply put, the outer margin merge means that when two vertical margins meet, they form an outer margin. The height of the merged outer margin is equal to the larger of the two height of the outer margin where the merge occurred. You can view the W3shool CSS outside the merge to understand this basic knowledge.
In actual work, the problem of vertical outer-distance merging is common in the margin-top of the first child element, the spacing between the parent element and the parent element is opened, and only under standard browser (Firffox, Chrome, Opera, Sarfi), IE behaves well. Examples can look at the following code (ie "Normal", under the standard browser to see the "bug"):
<title> vertical outer margin Merge </title>
<style>
. top{width:160px height:50px; background: #ccf;}
. middle{width:160px background: #cfc;}
. Middle. firstchild{margin-top:20px;
</style>
<body>
<div class= "Top" ></div>
<div class= "Middle" >
<div class= "FirstChild" > I just want to distance myself from my parent element. </div>
<div class= "Secondchild" ></div>
</div>
</body>
If according to CSS specification, ie "good performance" is actually a wrong performance, because IE's haslayout rendering caused this "good performance" appearance. Other standard browsers show a "problematic" look. Well, it's easy to discuss this if you've read the W3shcool CSS outside of the merged article. This problem occurs because, according to the specification, a box without padding (padding-top) and a top border (border-top), the top margin of the box overlaps the top margin of the first child element in its internal document flow.
Besides, the white dot is: The top margin of the first child element of the parent element margin-top if a valid border or padding is not touched. will continue to find their own "leadership" (parent element, ancestor Element) trouble. As long as the leadership to set an effective border or padding can effectively control the head of the margin to prevent it from leapfrog, false transfer of Imperial decree, their margin as the leader of the margin implementation.
As explained above for a solution for vertical outer-space consolidation, adding a border-top or padding-top to the middle element in the parent element example solves this problem.
In general, this problem is explained here, most of the article will not go further down, but as a practical developer, the most seek is to know its reason, originally used Margin-top is to separate distance from the parent element, and according to you such a solution, in fact, is a kind of "repair", in order to "make up for repair" This parent-child vertical margin merges this CSS specification "Bug", while forcing the use of border-top and padding-top on the parent element, uncomfortable, and not easy to remember, the next time this happens, you will forget this rule, And in the page design if you do not need to border-top add a top border, so a plus instead of the superfluous, for later changes leave hidden dangers.
With a margin or a padding?
When you should use margin: when you need to add white space outside the border. When no background (color) is required in the blank space. The gap between the two boxes connected up and down needs to be offset each other. such as 15px + 20px of margin, will get 20px blank.
When should use padding: need to add blank when border. When you need a background (color) in a blank space. The blank between the two boxes connected up and down, the hope equals the sum of the two. such as 15px + 20px of padding, will get 35px blank.
Personally think: margin is used to separate elements from the spacing between elements, padding is used to separate elements from the content of the interval. Margin is used to layout separate elements so that elements are irrelevant to elements; padding is used for the interval between elements and content, and there is a "breathing distance" between the content (text) and the (wrapped) elements.
The difference of margin in block elements and inline elements
HTML (this is the HTML standard, not XHTML) is divided into two basic elements, block and inline. As the name suggests, the block element is the element that is represented by "blocks" (block-like elements), and the inline element is the element that behaves as a "row" (character level elements and text strings). The main difference between the two is that the block element starts on a separate line in the page document, and one row is exclusive. The inline element coexists with other inline elements.
Block elements (blocks) are roughly: p| F12 F22 h3| h4| F52 h6| ul| ol| pre| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | fieldset | Address (as the HTML5 standard progresses, some elements will be abolished, and some new elements will be introduced) note that not all of the block elements default display properties are block, such as table display: The element of the table is also the block element.
Inline elements (inline elements) are roughly: #PCDATA (that is, text) | TT | I | B | Big | small| EM | Strong | DFN | CODE | Samp | KBD | VAR | CITE | ABBR | acronym| A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | bdo| INPUT | SELECT | TEXTAREA | LABEL | BUTTON
There are special types of elements: such as Img|input|select|textarea|button|label, which are called replaceable elements (replaced element). They distinguish between general inline elements (relatively, called non-replaced Element) are: These elements have intrinsic dimensions (intrinsic dimensions), and they can set width/height properties. Their nature is consistent with the elements that set the Display:inline-block.
Maybe a friend has a little bit of doubt about the non-replaced element, a little help to understand. Non-permutation elements, there is no explicit definition in the consortium, but we can literally understand that the replaced element corresponds to the permutation element, which means that we understand the meaning of the permutation element and we know the non permutation element. permutation element, the definition is given in the consortium: "An element of this is outside the scope of the CSS formatter, such as a image, embedded document, or applet"
From the definition we can understand that the permutation element (replaced element) mainly refers to IMG, input, textarea, select, object and so on, such as the default CSS format of the outer range of the elements. Furthermore, non-permutation elements (non-replaced element) are elements other than the permutation elements of IMG, input, textarea, select, object, and so on.
Margin in block-level elements, his performance can be fully reflected, up and down left and right you set. And remember that the margin reference datum of a block-level element is a margin distance from the previous element, that is, the element before itself. If the element is the first element, it is the margin distance relative to the parent element (but the first element is margin-top relative to the parent element and the parent element does not have a padding-top/border-top) to verify the knowledge of the vertical margin merging above.
Margin can also be used for inline elements, which are allowed by the specification, but Margin-top and margin-bottom have no effect on the height of the inline element (row), and because the boundary effect (margin effect) is transparent, he has no visual impact.
This is because the boundaries apply to inline elements without changing the line height of the elements, and if you want to change the inline element's row heights, which is similar to the line spacing of the text, then you can only use these three attributes: Line-height,fong-size,vertical-align. Keep in mind that this affects the height of the inline element is line-height rather than height, because the inline element is a row, set a height, then this is the entire segment of the inline element high? Or is it the height of the inline element line? This is not to say, so the unification of each row to set a high, can only be line-height.
Margin-top/margin-bottom has little practical effect on inline elements, but margin-left/margin-right can also affect the inline elements. Application margin:10px 20px 30px 40px; the left side of this CSS if written on the inline element, his effect is roughly, up and down, left his adjacent elements or text distance of 40px, right away from his adjacent elements or text distance of 20px. You can try it on your own.
Finally, in the inline element we mentioned the non replaceable inline element (non-replaced element), which is Img|input|select|textarea|button|label, although it is an inline element, But margin still can affect him up and down about!
Summarize the margin attribute can be applied to almost all elements except the elements of the table display type (excluding table-caption, table and inline-table), and the vertical outer margin to the non-permutation inline element (non-replaced inline Element) does not work.
Negative margin technology and its application
In all practical applications of margin, negative margin technology is one of the most important lessons in my Learning CSS, and many advanced applications and difficult diseases on the page can be realized with negative margin technology. Margin technology is so useful, limited to space I do not want to rush, so I decided to write a special article for him, detailed description of his effect, principle, and its application. Before this, you can read the Yiwen margin properties of the article, roughly understand the "margin guide" concept, and then look at the negative margin technology and its application this article.
Common browsers for bugs that appear under margin
A wide range of written so many, and finally summed up some of the common browser margin bug bar, the next encounter margin layout problems can be seen here to find solutions, if you also found other margin in the browser under the bug you can leave a message, check the acceptance I will be added in time, Thank you for sharing.
IE6 in the double margin bug:
• Occurrence: Margin Double when setting the Margin-left (element Float:left) or margin-right (element Float:right) for the first floating element within the parent element.
• Solution: To add display:inline to the floating element; CSS properties, or replace Margin-left with Padding-left.
• Principle Analysis: Block-level object default Display property value is blocks, when set the float, but also set its outer margin will appear this situation. You may ask: "Why is there no double margin bug between the object and the first object?" Because floats have their corresponding objects, only floating objects relative to their parent object can have such a problem. The first object is relative to the parent object, and then the object is relative to the first object, so there is no problem after the object is set. Why Display:inline can solve this bilateral distance bug, first of all inline element or inline-block element is not a bilateral distance problem. Then, Float:left and other floating properties can make the inline element haslayout, will let the inline element behaves like the inline-block element characteristic, supports the high width, the vertical margin and the padding and so on, so Div All the styles of class can be used on this display inline element.
Floating element 3px interval bug in IE6:
• Occurrence: Occurs when an element floats, and then a floating element naturally floats close to the 3px bug that will appear.
• Workaround: The right element also floats together, or adds IE6 Hack _margin-left:-3px to the right element, eliminating 3px spacing.
• Principle Analysis: IE6 browser bug bugs.
Ie6/7 negative margin Hide bugs:
• Occurrence: When a negative margin is set to a haslayout element within a haslayout parent element, the parent element portion is not visible.
• Workaround: Remove the haslayout of the parent element, or assign haslayout to the child element and add position:relative;
• Principle Analysis: Ie6/7 's unique haslayout produces problems.
Ie6/7 under Ul/ol tag vanishing bug:
• Occurrence: When ul/ol triggers haslayout and writes Margin-left on Ul/ol, the previous default ul/ol tag disappears.
• Solution: Set margin-left for Li, instead of setting Margin-left for Ul/ol.
• Principle Analysis: Ie6/7 browser bug
Ie6/7 margin and absolute elements overlap bugs:
• Occasions: Two-column adaptive layout, the left element absolute absolute positioning, the right side of the margin distraction distance positioning. The block-level element with the absolute attribute applied to the left of the IE6/7 overlaps the adaptive text content on the right.
• Workaround: Change the left block level elements to inline elements, such as replacing the div with span.
• Principle Analysis: This is because the Ie6/ie7 browser inline horizontal tag elements and block level of the label elements are not differentiated equally rendered. belongs to the Ie6/7 browser to render bugs.
IE6/7/8 under Auto Margin center BUG:
• Occasion: Set the block element margin Auto cannot center
• Workaround: This bug is usually caused by no doctype, and then the quirks mode of IE is triggered, plus the DOCTYPE declaration is OK. In the "Beat IE Sunflower book" in the method given is to add a width to the block element can be resolved, but according to my parents, plus with this method is invalid, if no doctype even to add width to the element can not make the Block element center.
• Principle Analysis: Lack of DOCTYPE declaration.
IE8 under Input[button | submit] Setting Margin:auto cannot be centered
• Occurrence: Under IE8, if you give a label such as a button (such as button input[type= "button"] input[type= "submit"), set {display:block; margin:0 auto;} If you do not set the width, you cannot center.
• Solution: You can add width to input
• Principle Analysis: IE8 browser bug.
IE8 percent padding vertical margin bug:
• Occurrence: When the parent element sets a percentage of the padding, the child element has a vertical margin, as if the parent element was set margin.
• Workaround: Add a Overflow:hidden/auto to the parent element.
• Principle Analysis: IE8 browser bug.
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
