Deep CSS attributes (6): margin

1. Introduction to attributes

The margin property accepts any length unit, which can be pixels, inches, millimeters, or em.
Optional values:
The auto browser calculates the margin.
Length specifies the margin value in a specific unit, such as pixels and centimeters. The default value is 0px.
% Specifies the margin based on the percentage of the width of the parent element.
Inherit specifies that the margin should be inherited from the parent element.

Ii. FAQs

1. Double margin of floating elements in IE6
Solution:
Set the block element display: inline in IE6;
. L {margin-left: 20px; float: left; display: inline ;}
Cause: first, the inline and inline-block elements do not have double margins. After float is set for the inline element, haslayout is generated to make the inline element have the characteristics of the inline-block element. In this way, vertical margin, padding, width, and height can be set.

2. The problem of combining the margin of margin
The combination of the outer margin occurs in the following three situations:
Scenario 1: Empty Block Element
A) if a block-level element is not separated by border, padding, inline content, height, and min-height, the attributes of margin-top and margin-bottom are merged,

B) instance:

1

6

7

8

As shown in the preceding example, the final. out computed height is 40px;
> = IE8, Firefox, and Chrome have the same test results. But I have a question: after the border is removed, its height is calculated as 0. Why?

Scenario 2: Parent element and first or last child element
If there is no border, padding, inline content, or clearance between the margin-top of a block element and its first child element, or there is no padding, inline content, height, min-height, or max-height separation between the margin-bottom of the Block Element and Its last child element. The outer margin is merged.

01

08

09

10

inner01

11

inner02

12

13

> = IE6, FF, and Chrome have the same effect. At this time, inner01's margin-top: Does not work. That's why many people asked me online why I set margin-top, the reason why margin-bottom does not work! For example:

Scenario 3: Adjacent element

1

5

6

List 1

7

List 2

8

List 3

9

> = IE6, FF, and Chrome have the same effect. The value of overlap is the maximum value in margin-top and margin-bottom. For example:

At this point, we can see that overlap also has the advantage of overlap.

Note: Only the vertical outer margin of the block box in the normal document flow can be merged. The margin between the inside box, floating box, or absolute positioning is not merged.

3. Why does margin not work?
Setting vertical margin for inline elements does not work. We recommend that you use padding instead of margin for block-level elements.

Iii. negative value locating of margin in common applications

1. Production of the IE6 background translucent effect button
The lower half of the button color is determined by using the negative value of margin.

2. News list (with date)
This is the implementation News list on the Sina Blog homepage.

1

2	new012014-03-02

3	new022014-03-02

4	new032014-03-02

5	new042014-03-02

6

Ul li {height: 24px; line-height: 24px ;}
Set. date {text-align: right; display: block; margin-top:-24px ;}. floating layout is not required.

3. Handling of tabs and other borders
The border color under the Selected tab must be set to the selected color, while the upper border of the content div should be set to margin-top:-1px;

4. Image and text alignment
Method 1:
Vertical-align: text-bottom
Method 2:
. Img {margin: 0 5px-2px 0 ;}
Test code:

1

7

8	Benjamin = frontend Development

9

Iv. Reference Links

Http://www.w3school.com.cn/css/css_margin_collapsing.asp

Originally: Benjamin-front-end development Attacker
Link: http://www.zuojj.com/archives/191.html
If you need to reprint it, please specify the original or original address in the form of a link.