Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use the margin attribute in CSS". In the daily operation, I believe that many people have doubts about how to use the margin attribute in CSS. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubt of "how to use the margin attribute in CSS". Next, please follow the editor to study!

The problem and use of margin in CSS

Margin is a very common attribute in CSS, and it contains a lot of content. This paper is divided into three parts to analyze and describe margin, including its properties, problems encountered in the process of use, and some advanced applications. The control expressions of JavaScript and margin are not described here.

1. Margin-related attributes

The margin property is an abbreviated property used to set all four outer margins in a declaration. There is no inheritance, that is, the margin value of its setting is not automatically passed to the next level tag.

The number of parameters after margin can be one, two, three, or four.

A parameter, for example: margin:10px; means the outer margin of the four sides is 10 pixels

Two parameters, for example: margin:10px5px; means the upper and lower margin is 10 pixels, and the left and right margin is 5 pixels.

Three parameters, for example: margin:10px5px2px; means the upper margin is 10 pixels, the left and right margin is 5 pixels, and the bottom margin is 2 pixels.

Four parameters, for example: margin:10px5px2px1px; means 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.

As soon as the number of parameters and their corresponding meanings were put here, they probably glanced past-no one paid any attention to them. I think it's a lot of trouble myself. Well, the purpose of putting this thing here is to tell you how to remember the correspondence.

This method can also be used to record the inner margins of padding, or for cliprect clipping. Starting with four parameters, you think: every day starts at 0 o'clock, when the hour hand points to the top, then slips around, and then goes back to the top, which is in the same order as the four parameters of margin, above (every day the hour hand starts from above), and then rotates clockwise, right, down, left. So "margin:10px5px2px1px; means the upper margin is 10 pixels, the right margin is 5 pixels, the bottom margin is 2 pixels, and the right margin is 1 pixel."

Three parameters, margin:10px5px2px; remember, every day the hour hand starts from above, so * At this time, you have to remember that this clock is symmetrical. So the left outer layout does not look at the right outer margin, they are symmetrical and equal. So, "margin:10px5px2px; means the upper margin is 10 pixels, the left and right margin is 5 pixels, and the bottom margin is 2 pixels."

The two parameters are the same, first of all, * on the parameter representation, the second represents the right, there is no third and fourth how to do, find symmetry! Top and bottom correspond, right and left correspond, so "margin:10px5px; means the upper and lower outer margin is 10 pixels, and the left and right outer margin is 5 pixels."

For a parameter, it is the same up and down, left and right, easy to remember, the four outer margins are the same.

Margin supports negative values, in the page layout, you should think boldly, bold use, can solve a lot of problems. This will be discussed in detail in the third part.

II. Frequently asked questions on margin

The problem of bilateral distance under 1.IE6

Margin dual layout can be said to be one of the classic bug under IE6. The condition is: block element + float + margin.

I still remember the stage when I thought I would CSS. I often encountered this problem. I would be very skillful in solving this problem with hack. I was still smug and complacent at that time. Now it seems that I was as tender as bean sprouts at that time. People who are really good at CSS basically won't encounter this bug. If you encounter this bug from time to time, it means your CSS still has a long way to go.

My experience is that the fewer floats, the less code, the more flexible pages, and the more scalable pages. Needless to say, it boils down to a certain level that floats will be used less. In addition, you will avoid using floating + margin. Therefore, the more later, the more difficult to encounter this kind of bug.

To mention the solution here, I do not recommend using hack, because using hack belongs to a slightly higher level than beginners. A page without a hack, but consistent performance across browsers, this is the level. Using display:inline; can solve this problem.

And why display:inline can solve the problem of double distance bug, first of all, there is no two-sided distance problem of inline element or inline-block element. Then, floating attributes such as float:left can make the inline element haslayout, which will make the inline element behave the same as the inline-block element, supporting height and width, vertical margin and padding, etc., so all the styles of divclass can be used on this displayinline element.

If you are an IE6 browser, you can click here to go to the demo instance page for more information

The problem of 2.margin overlap

The CSS2.0 specification describes margin overlap as follows:

1. The horizontal margins never coincide.

two。 Vertical margins may coincide between specific boxes:

The vertical margins adjacent to two or more block boxes in a ◆ normal flow direction coincide. The resulting margin width is the larger of the adjacent margin widths. If a negative margin occurs, the negative margin of the absolute value * * is subtracted from the positive margin. If there is no positive margin, the negative margin of the absolute value * * is subtracted from zero.

The vertical margin of ◆ between a floating box and other boxes does not coincide. / / this sentence is not rigorous enough, it is true in IE browsers, but it still coincides with browsers such as Firefox.

◆ "absolute positioning box" and "relative positioning box" margin do not coincide. / / this sentence needs to be considered. I tested it under browsers such as Firefox, and the result seems to be very bad.

The problem of margin overlap is not often encountered, sometimes even if the impact is very small, or through some other modifications can easily solve the problem. It is only today that I have studied the problem of margin overlap. When there is a lot of overlap, I have not found any good way to solve this problem, either IE browsers are still stubborn, or Firefox performance is not satisfactory. You can think again later, since you know that there will be margin overlap, you will pay attention to it when you write the code, so you won't have these overlapping problems, so it's not necessary to rack your brains to come up with a solution to the problem. The way to solve the problem of margin overlap is to understand it and avoid it.

Every coin has its pros and cons, but in fact, margin overlap is also useful. When there are multiple modules in the vertical direction, the margin overlap just allows the upper, middle and bottom to have a margin value, and because of the margin overlap, the margin values all behave the same. For example, all three modules in the vertical direction have margin:10px0;, then the result of * is (if there is no floating element interference): up, middle, middle and bottom, there is a distance of 10 pixels around. It's just the right position.

I've written a demo instance page about margin overlap, and you can click here for more useful information, including ways to solve the overlap problem.

Situations where 3.margin doesn't work

Margin does not work often appear in Firefox browsers, the most common reason is the floating effect, or the overlap of margin, or the overlap of padding and margin. That's all I have to say about this. Because margin does not work, you can use padding instead, or add a layer of tags and other methods, not too difficult, there is not much to say.

Third, the related application of margin negative value.

1. Realize the CSSsprite background positioning effect on the page

For the effect of background positioning on the page, you can see my article "Comprehensive extension of the opacity of png background under IE6" about the demo example page of positioning on the page.

two。 Application in liquidity layout

Mobile layout is also known as adaptive layout, also known as non-fixed width layout. For example, WordPress's classic two-column unfixed layout is the use of negative margin values to achieve positioning, which belongs to the application of left and right margin negative values in the liquidity layout. Interested students can take a look at the style code of the framework and learn something. There is also a kind of two-column adaptation that needs to use the upper and lower negative values of margin, especially in two-column or multi-column layouts with fixed height of one column and variable height of the other.

Height is not fixed column and height fixed column staggered up and down, there are no floating attributes, height is not fixed column margin-top a negative value, the size of the negative value is the height of the height fixed column, so that the two columns on the same level. And the width is adaptive, because there is no float, so different concerns about the internal existence of the clear:both attribute, fast floating. There are no examples here, so you can put this aside for a while, because I will write a good article about the liquidity layout (width adaptive layout), and then I will talk about the application of negative margin in the liquidity layout.

3. Treatment of equilateral frame lines on tabs

The following figure shows a more common tab style, as was the case with the old Xunlei home page.

How can you write such a styling effect with the most brief and maintainable CSS code?

I've actually done a little bit of annotations on the diagram, using margin-top:-1px; to solve the problem of the border at the bottom of the tab.

As for how to write to achieve this effect, it is recommended that you click here to enter the demo instance page, which will be helpful.

Similarly, if you want to use four div to achieve five 1-pixel left and right borders, just like the effect of a table, you can use so that each div has a border of about 1 pixel, and then margin-right:-1px; or margin-left:-1px; let the borders overlap, so that the four tags to achieve the effect of 5 borders.

4. The problem of aligning pictures with text

Pictures and text are aligned at the bottom by default. So when the picture and the text are together, they are often out of alignment. Especially when the pictures are small, I see a lot of people using vertical-align:middle; alignment. The effect is good under Firefox, but under IE, although the effect is better, it is still not enough.

If the picture is a 20-pixel ◆ 20-pixel small picture, and the text is about the same size as 12px, then using vertical-align:text-bottom; is a good way. Another way to achieve good compatibility is to use negative margin values. The img tag is a good tag that supports positive and negative positioning of margin in all four directions. Generally speaking, if the small icon at the beginning of the img tag is aligned with the text, img {margin:03px-3px0;} can be said to be a formula version, which can achieve good alignment effect and compatibility.

At this point, the study on "how to use the margin attribute in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.