Attributes, problems, and applications of CSS margin

When float is used, it is found that margin does not work, and the image and text are not aligned when they are side by side. So I found this article.

Bytes --------------------------------------------------------------------------------------------------------------------

Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]

Address: http://www.zhangxinxu.com/wordpress? P = 48

Introduction: Margin is a very common attribute in CSS, and it contains a lot of content. This article mainly analyzes and describes margin in three parts, including its attributes, problems encountered during use, and some advanced applications. The control expression for JavaScript and margin is not described here.

I. Margin related attributes
The margin attribute is a short attribute used to set all attributes with four margins in a declaration. There is no inheritance, that is, the set margin value is not automatically passed to the next level label.
The number of parameters after margin can be one, two, three, or four.
A parameter, for example, margin: 10px; indicates the margin of the four sides is 10 pixels;
Two parameters, for example, margin: 10px 5px, indicate the top and bottom margins are 10 pixels, and the left and right margins are 5 pixels;
Three parameters, such as: margin: 10px 5px 2px; indicates the top margin is 10 pixels, the left margin is 5 pixels, and the bottom margin is 2 pixels;
Four parameters, such as: margin: 10px 5px 2px 1px; indicates the top margin is 10 pixels, the right margin is 5 pixels, the bottom margin is 2 pixels, and the left margin is 1 pixel.

Margin supports negative values. In the page layout, you should think boldly and use it to solve many problems. This will be discussed in the third part.

Ii. FAQs about margin

1. Bilateral distance issues under IE6

Let's take a look at the picture and then talk about it:

Margin dual layout is one of the classic bugs in IE6. The condition is: Block Element + floating + margin.
I still remember the phase at which I thought I would use CSS. I often encountered this problem and used hack to solve it very skillfully. At that time, I was self-righteous and proud. At that time, it seems like bean sprout. People with really powerful CSS will basically not encounter this bug. If you encounter this bug from time to time, it means you still have a good way to go with CSS.
My experience is that the less floating, the less code there will be, more flexible pages, and more scalable pages. That's not to mention. It comes down to a certain level. Floating will be used less. In addition, you do not need to use floating + margin. Therefore, the more difficult it will be to encounter such a bug.
Here is a solution. I don't recommend using hack. Using hack is a little higher level than that of beginners. One page does not have one hack, but the performance of each browser is consistent. This is the level. Use display: inline; to solve this problem.
Why does display: inline solve this bilateral margin bug? First, the inline element or inline-block element does not have a bilateral margin problem. Then, float: Left and other floating attributes allow the inline element haslayout to make the inline element behave the same way as the inline-block element. It supports high width, vertical margin, and padding, therefore, all Div class styles can be used on the display inline element.

If you are an Internet Explorer 6, click here to go to the demo instance page for more information.

2. Margin overlap

The CSS 2.0 specification describes the margin overlap as follows:
1. the horizontal margin will never overlap.
2. The vertical margin may overlap between specific frames:
* The adjacent vertical margin of two or more block boxes in the normal flow direction will overlap. The result margin width is a large value in the adjacent margin width. If a negative margin is displayed, the negative margin of the absolute value is subtracted from the maximum positive margin. If there is no positive margin, the negative margin of the absolute value is subtracted from zero.
* The vertical margin between a floating box and other boxes does not overlap. // This statement is not rigorous enough. It is true in IE, but it is still coincident in Firefox and other browsers.
* The margin of the "absolute positioning box" and "relative positioning box" does not overlap. // This sentence needs to be considered. I tested it in Firefox and other browsers, and the effect looks terrible.

Let's take a look at the illustration:

The overlap of margin is not often encountered. Sometimes, even if the impact is small, or other modifications can easily solve this problem. Today, I have carefully studied the problem of margin overlap. When there are too many overlaps, I have not found any good solutions to this problem. If IE is still stubborn, or Firefox is not doing well. However, as I thought again later, since we know that there will be a margin overlap, we will pay attention to it when writing code, so there will be no such overlap issues, therefore, it is unnecessary to find a perfect solution. The best way to solve the margin overlap problem is to understand it and avoid it.

Every coin has its front and back sides. In fact, the overlap of margin also has its usefulness. When there are multiple modules in the vertical direction, the margin overlap can make the upper and lower sides have a margin value, and because the margin overlaps, the performance of the margin value is the same. For example, all modules in the vertical direction A, B, and C have margin: 10px 0. The final result is (if there is no floating element interference between the upper and lower sides): top, there is a 10-pixel spacing between the top, bottom, and bottom. Perfect positioning.

Regarding the margin overlap, I wrote a demo instance page. You can click here to get more useful information, including some methods to solve the overlap problem.

3. When margin does not work

Margin does not work much in Firefox. The most common cause is floating influence, that is, the overlap of margin or the overlap of padding and margin. I mean so much about this. Because margin does not work, you can use padding instead, or add a layer of labels to solve the problem. It is not difficult. There is not much to say.

Iii. Application of negative margin values

1. Implement CSS sprite background positioning on the page

For details about the background positioning effect on the page, refer to my article "comprehensive expansion of PNG background opacity under IE6 ".

2. Application in liquidity Layout

The mobility layout is also called Adaptive Layout, or the layout with unfixed width. For example, the two-column layout of a typical WordPress is the position of the negative value of margin, which belongs to the application of the negative value of left and right margin in the liquidity layout, if you are interested, you can take a look at the style code of the framework and learn something. There is also a kind of two-column self-adaptation that requires the upper and lower negative values of margin, especially in the two-column or multi-column layout with fixed column height and variable column height. The height column is not fixed and the height column is staggered up and down, there is no floating attribute, the height of the bar is not fixed margin-top a negative value, the size of the negative value is the height of the fixed column, so, the two columns are on the same horizontal line. And the width is adaptive. Because there is no floating, the clear: Both attribute exists internally, which breaks the floating. There is no example here. It is a bit imaginary. You can put it first, because I will write a good article about the liquidity layout (Adaptive width layout). At that time, I will explain the application of negative margin values in the liquidity layout.

3. Handling of tabs and other borders

A common tab style is displayed. the old version of the thunder homepage is like this.

How to use the most easily maintained CSS code to write such style effects?

In fact, I have made a small note on the graph, using margin-top:-1px; to solve the problem of displaying the border under the tab.
We recommend that you click here to go to the demo instance page.

Similarly, if you want to use four divs to implement a 5-pixel left-right border, just like a table, you can use it to make each Div have a border of about 1 pixel, then, you can use the margin-Right:-1px; or the margin-left:-1px; Method to overlap the border, so that the four labels can implement the 5 border effect.

4. Image and text alignment

By default, the image and text are bottom aligned. Therefore, images and text are often not aligned. In particular, the image is more obvious than the hour. I see many people use vertical-align: middle; alignment. In Firefox, the effect is good, but in IE, although the effect is better, it is still not enough.
If the image is a small image of about 20 pixels * 20 pixels and the text is about 12px big, use vertical-align: Text-bottom; is a good method. There is also a try-and-Try experience. A good compatibility method is to use a negative value of margin. The IMG label is a good label and supports positive and negative positioning in the four directions of margin. In general, if the small icon of the IMG label is aligned with the text, IMG {margin: 0 3px-3px 0;} can be said to be a formula version, which can achieve better effect and compatibility.

 

(This article is complete)