CSS Web Design tips: Margin negative and bug resolution

Source: Internet
Author: User
Tags relative

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.


    Solution: add position:relative; Zoom:1;



    Related Article

    Cloud Intelligence Leading the Digital Future

    Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

    Register Now >

    Starter Package

    SSD Cloud server and data transfer for only $2.50 a month

    Get Started >

    Alibaba Cloud Free Trial

    Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

    Learn more >

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.