I. The principle of negative margin
The positive margin is moved by the position of the adjacent module, and the surrounding modules are appropriately excluded.
A negative margin, or margin, is a negative four boundary value.
Using negative margins Margin-left and margin-top in HTML is equivalent to moving the element left, up, and the position of the document Flow Changes.
With negative margins margin-right and margin-bottom, the element itself does not change, and the elements that follow it move left and move up.
the sum of the document flow through the negative margin itself can only move up or right.
Two. description
1margin-left,margin-top
1 <styletype= "text/css">2 . Wrap Div{float: left;Height:200px;}3 . Wrap{Overflow:Hidden;_zoom:1;}4 . Content{width:10%;background:Gray;}5 . Nav{width:5%;background:Orange;;}6 . Infor{width:5%;background:Green;}7 </style>8 <Body>9 <Divclass= "wrap">Ten <Divclass= "content">A</Div> one <Divclass= "nav">B</Div> a <Divclass= "infor">C</Div> - </Div> - </Body>
Add Margin-left:-3%;nav to Nav to move forward 3%.
2.margin-right,margin-bottom
<styletype= "text/css">. Wrap Div{float: left;Height:20px;}. Wrap{Overflow:Hidden;_zoom:1;}. Content{width:10%;background:Gray; }. Nav{Clear:both;width:5%;background:Orange;}. Infor{Clear:both;width:5%;background:Green;}</style><Body><Divclass= "wrap"><Divclass= "content">A</Div><Divclass= "nav">B</Div><Divclass= "infor">C</Div></Div></Body>
Add Margin-bottom:-1%;nav to content to move up 1%.
Css-negative margin principle