Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve css negative margins". In daily operation, I believe many people have doubts about how to achieve css negative margins. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to achieve css negative margins". Next, please follow the editor to study!

Introduction to negative margin

Negative margins are used as follows:

# content {margin-left:-100px;}

Negative margins are usually used in small areas. But then you will see that it can do a lot of things. Here are some things you should know about negative margins:

They are completely effective, CSS.

I'm not kidding you. The W3C even says that using negative margins in the bounding box is allowed.

Negative margin is not in hack

This is especially true. It is precisely because of the lack of a good understanding of negative margins that leads to all kinds of strange problems. It is hack only when it is used to solve bug elsewhere.

It conforms to the normal document stream

When negative margins are used on elements that do not float, it does not destroy the normal document flow. So if you use negative margins to fine-tune elements up, all subsequent elements will fine-tune as well.

It's quite compatible.

Negative margins are supported by almost all modern browsers (in most cases with IE6)

When float is used, it will behave differently.

Negative margins are not an attribute you normally use, so be careful when using them.

Dreamweaver doesn't understand it.

Negative margins do not show up in the DW design window. Then why do you still use DW's design window to see the results? To work with him?

Negative margins are very powerful if they can be used correctly. It is important to have negative margins in two scenarios.

Use negative margins in the static element:

1.gif

A static element is an element that has not used float. The image above shows what happens after a static element uses a negative margin.

When a static element uses negative margins in top/left, it pulls the element in that particular direction, such as

/ * Movestheelement10pxupwards*/

# mydiv1 {margin-top:-10px;}

But when you set the negative margin to relative bottom/right, it doesn't pull the element down or to the right. Instead, it pulls the following elements in to cover itself.

/ *

All elements after # mydiv1 will go up

Move 10px, while # mydiv1 does not move at all

* / # mydiv1 {margin-bottom:-10px;}

If the width is not set, the negative left and right margins pull the element in both directions to increase the width. The role of margin here is equivalent to padding.

Use negative margins in floats

Add the following to our html code:

First

Second

If you use a negative margin on a floating element, it produces a blank space that can be overwritten by other elements. This technique can be used for user streaming layout. For example, one column has a width of 100%, and the other column has a fixed width, such as 100px.

# mydiv1 {float:left;margin-right:-100px;}

If both elements use a left float and set margin-right:-20px. # mydiv2 will think of # mydiv1 as a reduced width 20px (so it will overwrite part of it), but it is interesting that # mydiv1 will not change anything, but will remain the original width.

If the negative margin is as large as the width, it will be completely covered. Because the outer margin, inner margin, border, and content add up to the width of the element. If the negative margin equals the width of the element, the width of the element becomes 0px.

learn in order to practise

Now that we know that using negative margins is effective in CSS2, using it can provide us with some very interesting CSS techniques.

Turn a single list into three columns

If you have a list that is too long vertically, why not divide it into columns? Negative margins allow you to do this without adding any floats and tags. You'll find how easy it is to do this with negative margins, like the following:

HTML:

Eggs

Ham

Bread

Butter

Flour

Cream

CSS

Ul {list-style:none;}

Li {line-height:1.3em;}

.col2 {margin-left:100px;}

.col3 {margin-left:200px;}

.top {margin-top:-2.6em;} / * theclincher*/

By adding margin-top:-2.6em to .top. All the elements will be perfectly aligned. Using negative margins is much better than using relative positioning, because you only need to add negative margins to the first element of the new column.

At this point, the study of "how to realize the negative margin of 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.