Eight major stunts of negative use of margin

Believe in the use of negative margin, everyone has their own set of methods. Here, sorting out the usual commonly used some margin negative effect of the production, share with you!

Let's take a look at the schematic diagram of margin negative values:

When a margin negative value (top/left) is set on an element, the element will produce a displacement in that direction. For example:

/* Element Upward shift 10px * *

. demo {margin-top:-10px;}

When you set a margin negative value for an element (bottom/right), the element does not produce a displacement as you would expect, but instead "pulls" any element that is immediately behind it and overwrites it to its top. For example:

/* All elements immediately following the element demo up 10px/

. demo {margin-bottom:-10px;}

Note: If the element does not have a width set, then setting a margin negative value (left/right) on the element will increase its width in two directions, as if adding padding to the element.

"Case Resolution"

One or three column display (without floating and additional labels);

When the list is too long, we generally consider floating to make it appear as multiple columns, in fact, another way of thinking can be achieved.

             negative margin list three columns show             
 

            
  
10 home state-owned enterprises annual hospitality fee of 2.9 billion is only used for food and drink 
          
  
 Media says China's luxury car market is tightly controlled by the government fast shrinking of buses 
         
  
 Philippine spokesperson smiles to kill Taiwan fishermen event 
         
  
 Mistress calls the foreign phone to provide evidence          
  
 Lei alleged bribery was prosecuted by procuratorial organ 
          
  
 Day said that suspected Chinese navy submarine 
     in the sea area near Okinawa Kyumi 
 
  

Second, the superposition effect;

The most common tab, the current item selected state;

             negative Margin's overlay             
 

            
  

                         
   

                             
    
tab one
                           
    
tab two
                          
    
tab three
                          
    
tab four
                      
   
                  
  
         
  

    Desolate Wilderness, A group of tyrannical robbers were lashing a beautiful girl, Maria (Laura Danna Capolete Loredana Cappelletti). Kidnap Diago (Franco Niro Franco nero adorn) rescue. He was mysterious and cold, dragging a coffin in a muddy wilderness. Diego took Maria to the desolate town, and people were curious about his arrival, and were even more uneasy about the hidden secrets of the coffin. 
  
     
 
  

Three, two column flow pattern layout;

Fixed-width layout so easy, with floating easily handle two columns of adaptive layout, three columns the same.

             negative margin Two-column adaptive layout             
 

            
  

                
   

    main
   
         
  
         
  

    aside
  
     
 
  

To remove excess outer margin;

How do you handle the margin value of the last element of each line? Set the class name separately 0? Trim through the parent layer? Use margin negative value bar!

             negative margin removal extra margin                 
 

               
  
item-1
             
  
item-2
              
  
item-3
              
  
item-4
              
  
item-5
              
  
item-6