CSS: Do you really know the margin?

Do you really know the margin? Do you know what the margin is? Do you know what a vertical margin merger is?

What is the difference between a margin in a block element and an inline element? When should I use padding instead of margin? Do you know the negative margin? Do you know the use of negative margin in the actual work? What are the common bugs that appear in the browser margin? ......

Writing CSS, you have to deal with the margin, and for this usually our most commonly used CSS properties We do not know very well. In this I intend to write this article, one is the summary of their work, but also a carding of their own knowledge.

What is margin?

The CSS margin property defines the space around the element. By using a separate property, you can set the top, right, bottom, and left margins. You can also use the shorthand margin property to change all margins at the same time. --w3school

boundary, generating additional white space around the element. "White space" is usually the area where other elements cannot appear and the background of the parent element is visible. --CSS Authoritative Guide

I prefer to use the word "margin" to explain margin (the same padding can be called "padding", but I just like to call padding "filler" or "white"), We can clearly understand that the most basic use of margin is to control the space around the elements of the interval, from a visual angle to achieve the purpose of separating each other.

margin Properties

Margin are 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 value types for the margin-width of the

margin are: Auto | length | Percentage

You can also use the shorthand margin property to change all margins simultaneously: margin:top Right Bottom
Br>left; (eg:margin:10px 20px 30px 40px) The memory mode is the clockwise "upper right bottom left" memory around the element.

and the specification also provides the omitted numeric notation, basically as follows:

1, if margin has only one value, the margin of the upper right and bottom left is the same value.

For example: margin:10px; is equal to margin:10px 10px 10px 10px;

2. If margin has only two values, the first value represents the upper and lower margin value, and the second value is the value of left and right margin.

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 value of the left and right margin, and the third value represents the value of the lower margin. For example: margin:10px 20px 30px; is equal to

margin:10px 20px 30px 20px;

4. If margin has four values, then these four values correspond to the four margin values on the lower right and bottom left respectively. Example: margin:10px 20px 30px 40px;

In the actual application, the individual does not recommend the use of three values of margin, one is easy to remember, two is not easy to modify later,

First if written margin:10px 20px 30px, the future needs to change to 10px, right 30px, under 30px, left 20px, you have to still have to take this margin into margin:10px 30px 30px 20px;

Laborious and not pleasing, as the beginning of the honestly written margin:10px 20px 30px 20px; Come on, don't try to save two bytes for now so that the cost of re-development will rise later.

Vertical margin Merge problem

Don't be intimidated by the noun above, simply put, margin merging means that when two vertical margins meet, they will form an outer margin.

The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur. You can look at the w3shool CSS margin merge to learn this basic knowledge.

In practical work, the vertical margin merging problem is common in the margin-top of the first child element to open the spacing between the parent element and the adjacent element of the parent element, and only under the standard browser (Firffox,Chrome, Opera, Sarfi) problems, IE is performing well. Example can see the following code (ie Performance "normal", under the standard browser view "bug"):

"http://www.w3.org/1999/xhtml"> . top{width:160px; height:50px; background: #ccf;}    . middle{width:160px; background: #cfc;} . Middle. Firstchild{margin-top:20px;} </style> class="Top"></div> <divclass="Middle"> <divclass="FirstChild"> I actually just want to separate the points from my parent element. </div> <divclass="Secondchild"></div> </div> </body> 
 If according to the CSS specification, ie "good performance" is actually a wrong performance, because IE's haslayout rendering led to this "good performance" appearance. Other standard browsers exhibit a "problematic" appearance.

Well, if you've read the W3shcool CSS outside of the merged article, it's easy to talk about it. The reason this problem occurred is thataccording to the specification, if a box is not filler (padding-top)and the top border (border-top), the top margin of the box will be the first child in its internal document flowthe top margin of the element overlaps. 

Besides, the white point is: The top margin of the first child element of the parent element margin-top if a valid border or padding is not touched. The trouble of "leading" (parent element, ancestor Element) can be found in a layer.

As long as the leadership to set an effective border or padding can effectively control the goal of the non-leader of the margin to prevent it leapfrog, false preach Imperial decree, their own margin when the leader of the margin execution.

For vertical margin mergesThe solution explained above, adding a border-top or padding-top to the middle element in the parent element exampleSolve the problem.

In general, this problem is explained here, most of the article will not go further, but as a real-life developer, the most is to know its why, the original use of margin-top is to separate from the parent element distance, and according to your such a solution, is actually a "repair", in order to "repair" This parent-child vertical margin merges this CSS specification "Bug", and forcing the use of border-top and padding-top on the parent element, uncomfortable, and not easy to remember, the next time this happens will still forget this rule, and in page  design If you do not need to add an upper border border-top, such a addition to the superfluous, for later changes left hidden trouble. 
 
 Why do you have to use Border-top,padding-top to write more lines of code for such a so-called standard specification? Answer you can refer to another article with margin or use padding to find the answer. 
 
  use margin or padding  
 
 When you should use margin: when you need to add white space outside the border. When the background (color) is not needed in the space. 
 
 The white space between the two boxes that are connected to each other needs to be offset from one another. such as 15px + 20px margin, will get 20px blank. When the 
 
 should be used padding: When you need to add white space in the border beta. When the background (color) is required in the 
 
 space. The gap between the top and bottom two boxes is equal to the sum of the two. such as 15px + 20px padding, 
 
 will get 35px blank. 
 
 Personally, the  margin is used to separate elements from elements, and padding is used to separate elements from inside   spaces. Margin is used to separate elements from elements so that elements are irrelevant to each other; padding is used for the interval between the element   and the content so that there is a "breathing distance" between the content (text) and (wrapped) elements.  
 
 Here I have intercepted some of the contents of another article, please see the difference between using margin or padding  margin in block elements, inline elements  
 
 The HTML (in this case, the HTML standard, not XHTML) is divided into two basic elements, block and inline. As the name implies, the block element is a "block" representation of the element (Block-like elements), the inline element is a "line" representation of the element (character level elements and text strings). 
The main difference between the two is that the block element in the page document begins with a row, and a single row is exclusive. The inline element is in line with the other inline elements.

The block elements (blocks) are roughly :
p| F12 h2| h3| h4| F52 h6| ul| ol| pre| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | fieldset | ADDRESS
   (with the advancement of the HTML5 standard, some elements will be abolished, And some new elements will be introduced) note that not all of the default display properties of the block elements are blocks, and the display:table elements like table are also block elements. 
 
  Inline element (inline element) approximately :            
   #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 | The button 
 
 has special elements such as Img| 
 There may be  Friends are a little puzzled by the non-permutation element (non-replaced Element), and slightly help you understand it. Non-permutation elements, no explicit definitions are given in the list, but we can literally understand that            
The non-permutation element corresponds to the permutation element (replaced element), which means that we understand the meaning of the permutation element and know the non-permutation element. Permutation elements, which are defined in the list:

 
 

  
  

    the "an element was outside the scope of the CSS formatter, such as an image, embedded document, or applet" 
  
 
 
   from the definition we can understand , permutation elements (replaced element) are mainly referred to as IMG, input, textarea, select, object and so on, which have CSS formatting elements of the outer range. In turn, the 
 
 non-permutation element (non-replaced elements) is an element other than the permutation element, such as IMG, input, textarea, select, and object. 
 
 Margin under block-level elements, his performance can be fully reflected, up and down any of your settings. And remember that the reference datum for the margin of a block-level element is the margin distance of the previous element, which is relative to the element before itself. 
   If an element is the first element, is the margin distance relative to the parent element (but the first element is margin-top with respect to the parent element and the parent element is not set padding-top/border-top, it is necessary to verify the knowledge of the vertical margin merge above) 
 
 Margin can also be used for inline elements, which is allowed by the specification, but Margin-top and margin-bottom have no effect on the height of the inline element (for rows), and because the boundary  effect (margin effect) is transparent, Nor did he have any visual influence. 
 
 This is because the boundary is applied to inline elements without changing the row height of the element, and if you want to change the line spacing of inline elements, which is similar to the text, then you can only use these three properties: line-height,fong-size,vertical-
 Align.  
   please Remember, this affects the inline element height is line-height rather than height, because the inline element is a row, set a height, then this is the entire length of the inline element of the high? Or is the inline element a row high? This is not to be sure, so the unification of each row to a high, can only be line-height. The 
 
 Margin-top/margin-bottom does not have much practical effect on inline elements, but margin-left/margin-right can still affect inline elements.  
   should Use margin:10px 20px 30px 40px; the left side of the CSS if written on the inline element, his effect is roughly, up and down no effect, the left side of his adjacent elements or text distance is 40px, the right side of his adjacent elements or text distance of 20px. You can try it yourself. 
 
 Finally in the inline element are the non-replaceable inline elements (non-replaced element) that we mentioned above, and these elements img|input|select|textarea|button|label, although they are inline elements, But the margin can still affect his up and down around! The 
 
  summary down margin property can be applied to almost any element except for the table display type (excluding   table-caption, table and inline-table). Also, the vertical margin does not work with the non-permutation  
  inline Element (non-replaced-inline elements).