The difference between CSS padding and 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 the "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.

Features of margin

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 value types for margin margin-width are: auto | Length | Percentage

You can also use the shorthand margin property to change all margins at the same time: margin:top right bottom left; (eg:margin:10px 20px 30px 40px) The memory mode is a clockwise "up-and-down" memory around the element.

And the specification also provides the ellipsis of the numerical 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 the wrong, the second is not easy to modify later, a start if written margin:10px 20px 30px, the future needs to change to 10px, right 30px, under 30px, left 20px, You have to take this margin apart. margin:10px 30px 30px 20px; laborious and not pleasing, as the beginning of the honestly written margin:10px 20px 30px 20px; Do not increase the cost of future re-development in order to save two bytes now.

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"):

<title> Vertical 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 actually just want to separate the points from my parent element. </div>
<div class= "Secondchild" ></div>
</div>
</body>

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. The solution for vertical margin merging has been explained above, adding a border-top or padding-top to the middle element in the parent element example to solve 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 Merge 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 situation will still forget this rule, and in the page design draft if you do not need Border-top add an upper border, so a plus instead of the lily, for later changes left hidden trouble.

Why do you have to use Border-top,padding-top to write such a line 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.

With margin or with padding?

When margin should be used:

You need to add white space outside the border.

When the background (color) is not needed in the space.

The gap between the top and bottom two boxes that need to be offset from one another. such as 15px + 20px margin, will get 20px blank.

When should you use padding:

You need to add white space to the border beta.

When the background (color) is needed 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.

The individual thinks that margin is used to separate elements from elements, and padding is used to separate elements from the content. Margin is used to separate elements from elements so that elements are irrelevant to each other, and padding is used for the interval between elements and content, so that there is a "breathing distance" between content (text) and (wrapped) elements.

The difference between a margin in a block element, an inline element

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.

Block elements (blocks) are roughly: p| F12 h2| h3| h4| h5| 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 element are blocks, such as the display of table: The element of 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 referred to as replaceable elements (replaced element). They distinguish between the general inline elements (in contrast, the non-replaced element): These elements have intrinsic dimensions (intrinsic dimensions), and they can set the Width/height properties. Their nature is consistent with the elements that set the Display:inline-block.

Maybe some friends have some doubts about non-permutation elements (non-replaced Element), to help you understand a little bit. Non-permutation elements, there is no explicit definition in the list, but we can literally understand that the non-permutation element corresponds to the permutation element (replaced element), that is to say we understand the meaning of the permutation element, we understand 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 that the permutation element (replaced elements) mainly refers to IMG, input, textarea, select, object and so on, such as the default CSS formatting elements of the outer range. In addition, the non-permutation elements (non-replaced element) are elements other than the permutation elements of IMG, input, textarea, select, and object.

Margin in the block-level element, 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 the element is the first element, it 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) to confirm 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 (to the row), and because the boundary effect (margin effect) is transparent, he has no visual impact.

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 heights of inline elements that are similar to the line spacing of the text, then you can only use these three properties: Line-height,fong-size,vertical-align. Keep in mind that this affects the inline element height is line-height rather than height, because the inline element is a row, the height of the word, 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.

Margin-top/margin-bottom does not have much practical effect on inline elements, but margin-left/margin-right can still influence inline elements. Application 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) 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 sum down Margin property can be applied to almost all elements except the table display type (excluding table-caption, table and inline-table) elements, and the vertical margin pairs non-displaced inline elements (non-replaced inline Element) does not work.

Common browser margin appears in the bug

A lot of write so many, and finally summed up some browser common margin bug bar, after encountering the problem of the layout of the margin can be seen here to find solutions, if you also found other about the browser margin of the bug you can leave a message, check the adoption I will be added in time, Thank you for sharing:

IE6 in the double-sided bug:

Occurrence: Margin doubles when the first floating element within the parent element is set to Margin-left (element Float:left) or margin-right (element float:right).

Solution: To add display:inline to the floating element; CSS properties, or use Padding-left instead of margin-left.

Principle Analysis: Block-level objects The default display property value is block, and when the float is set, it also sets the margin for this situation. You might ask, "Why don't there be a double margin bug between the object after and the first object?" Because floats have their corresponding objects, this problem only occurs with floating objects that are relative to their parent objects. 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 bug, first of all the inline element or inline-block element is no bilateral distance problem. Then, floating properties such as float:left allow the inline element to haslayout, allowing the inline element to behave like inline-block elements, supporting high widths, vertical margin, and padding, 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 non-floating element naturally floats close to the 3px bug that appears.

WORKAROUND: The right element also floats together, or add IE6 Hack _margin-left:-3px for the right element, eliminating 3px spacing.

Principle Analysis: IE6 bug of browser bug.

Ie6/7 negative margin hidden bug:

Occurrence: When a negative Marin is set to a non-haslayout element within a parent element that has haslayout, the part of the parent element 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 unique haslayout generation problem.

Ie6/7 the ul/ol tag disappears bug:

Occurrence: When Ul/ol triggers Haslayout and is written margin-left on Ul/ol, the previous default ul/ol tag disappears.

Workaround: Set Margin-left to Li instead of setting Margin-left for Ul/ol.

Principle Analysis: Ie6/7 browser bug

IE6/7 margin and absolute element overlap BUG:

Occurrence: The two-column adaptive layout, the left element absolute absolute positioning, the right margin to open the distance positioning. Block-level elements that have the absolute attribute applied to the left of IE6/7 overlap with the adaptive text content on the right.

Workaround: Change the left block level element to an inline element, such as changing the div to span.

Principle Analysis: This is due to the fact that the Ie6/ie7 browser will not differentiate between the inline horizontal tag element and the block level tag element. belongs to the Ie6/7 browser rendering bug.

IE6/7/8 Auto Margin Center bug:

Occurrence: Setting margin auto to block element cannot be centered

Workaround: The cause of this bug is usually no doctype, and then triggered the IE quirks mode, plus the DOCTYPE declaration can be.

In the "Beat IE Sunflower Treasure Book" In the method is to add a width to block elements can be solved, but according to my own test, plus with this method is invalid, if there is no doctype even add width to the element can not let the block element center.
Principle analysis: Missing DOCTYPE declaration.

IE8 under Input[button | submit] Settings Margin:auto cannot be centered

Occurrence: Under IE8, if a label such as button (such as button input[type= "button"] input[type= "Submit") set {display:block; margin:0 auto;} If you don't set the width, you can't center.

Workaround: You can add a width to input

Principle Analysis: IE8 browser bug.

IE8 percent padding vertical margin bug:

Occurrence: When the parent element sets a percentage of padding, the child element has a vertical margin, as if the parent element was set to margin.

Workaround: Add a Overflow:hidden/auto to the parent element.

The box model divides the area into boxes inside and outside the box, using border as the boundary.
Margin refers to the distance between the box and other elements outside, padding means the distance between the four sides of the box and the elements inside it.
That is, the outer margin and the inner margin.