CSS Web Design tips: Margin negative and bug resolution

Article Introduction: margin negative values are often used in recent projects, and here is a summary of the 5 uses of negative margin and the resolution of related bugs.

Margin negative values are often used in recent projects, and here's a summary of 5 uses of negative margin

And the resolution of related bugs.

1. The application in the liquidity layout

For example, the two-column WordPress layout is the use of margin negative value to achieve the positioning, belong to about

The application of margin negative value in the flow layout.

Left width fixed

Width adaptive, la la la ... Width adaptive, la la la ... Width adaptive, la la la ...

Another type of two-column adaptive use is the upper and lower negative value of the margin, especially in a column height fixed, the other column height

An indeterminate two-column or multiple-column layout is most common. The height of the column and the height of fixed columns staggered up and down, there is no floating

property, a highly margin-top column is a negative value, the size of which is the height of the fixed bar, and two columns are implemented

On the same horizontal line. And the width is adaptive, and do not worry about a series of problems floating.

Style section:

. fixed-height{
height:200px;
width:200px;
Background: #666;
}
. flow-height{
margin-top:-200px;
margin-left:200px;
}

Page structure:

High-fixed,

Height-width adaptive, la la la ... Height-width adaptive, la la la ...

2. In the processing of border lines such as tabs
The following illustration shows a more common tab.


As shown in the diagram, use margin-bottom:-1px to resolve the problem displayed by the bottom border of the tab. [Note:] using margin-

Top, Margin-bottom needs to see how the structure is written and used flexibly.

is similar, if you want to use seven div to achieve 8 1 pixels of the left and right border, you can have each div has a 1-pixel

border, and then margin-right:-1px, or margin-left:-1px; Let the border between the lines overlap to achieve the effect

fruit.

3. Picture alignment with text

When a picture is associated with text, it is often misaligned because the picture and text are bottom aligned by default. When the picture is less obvious than

, use Vertical-align:middle, align, and achieve the desired effect under Firefox,chrome

, but IE is still a bit awkward. The

uses margin negative values to display exactly the same on each browser. The IMG tag supports positive

and negative positioning in the margin four directions. You can set the

img{margin:0 by using the IMG tab to display the icon and to achieve the desired effect with text alignment. 3px-3px 0;}.

4. Hide Top (end) border

with the structure as concise as possible, style code as little as possible, reduce the reliance on JS principle, we can use the style to implement the

The effect of a list item that has no border, without additional settings such as

Final

Style section:

Structure part:

• tab1-1


• tab1-2


• tab1-3


• tab1-4

• here is a message


• here is a message


• here is a message


• here is a message


• here is a message

5. On the page to achieve the CSS sprite background positioning effect

Use the IMG definition margin negative values to achieve a similar background-position effect. This method can reduce a page

The number of face requests, but it violates the principle of separating style from layout, so it is not recommended to use

Ps:

Bug with margin negative value under Ie6/ie7: part of it is hidden away.

Web Teaching Network

Solution: add position:relative; Zoom:1;