First, eliminate the distance between the upper and lower structure
Distance between Div
Let two top and bottom structure div block distance to zero, usually novice in the production of Div CSS page, will not take into account the initialization of CSS properties, so that each label properties default CSS properties will cause dislocation, compatibility and so on.
such as the upper and lower structure of the 2 box div block, the middle has a certain spacing can not be eliminated
Two, clear div spacing solution
Set div tags in css with each property parameter of 0
div{margin:0;border:0;padding:0;}
The DIV tag is set up here. CSS properties are equivalent to initializing the div tag CSS properties, where the margin margin is set to 0; The border border property is 0 and the inner filler is 0; this is equivalent to initializing the div box from the distance between the attributes of 0, This will not cause div directly to a certain distance.
Of course, the recommendation in the production of the development of Div CSS is best to page CSS properties, commonly used Web page tags initialization.
CSS initialization tips Address:/template/m17.shtml
Three, set the spacing between div boxes
Above is the use of CSS to clear the distance between boxes. Next, I'll introduce you to set the spacing between boxes.
Use CSS style words for margin (you can go to the CSS margin tutorial to learn more about how to use them).
1, set the object up and down spacing
. divcss5-a{margin:10px 0}
Set the "Divcss5-a" object to 10px up and down, 0
2, set the object to the left and right distance
. divcss5-b{margin:0 8PX}
Set the "Divcss5-b" object up to 0 up and down, 8px
3, Set div box and above the adjacent spacing
. divcss5-c{margin-top:10px}
Set the "Divcss5-c" object to be 10px above the adjacent spacing
4, Set Div box and the next adjacent distance
. divcss5-d{margin-bottom:10px}
Set the "Divcss5-d" object to be adjacent to the next 10px spacing
5, Set Div box and left adjacent spacing
. divcss5-e{margin-left:9px}
Sets the spacing between the "Divcss5-e" object and the left side to 9px
6, set the box and the right adjacent distance
. divcss5-f{margin-right:12px}
Set the "Divcss5-f" object to the right adjacent spacing of 12px
Above we in order to facilitate the introduction of margin set object spacing, the object of CSS named ". Divcss5-a" to ". Divcss5-f", the actual use of time more demand naming.
Four, let the left and right structure between the contents of a certain distance
As shown above, a certain distance between the contents of the structure to set skills
Solutions and Techniques:
Generally we use float float properties (float:left left), Float:right (right) to solve this problem. Such layout general width must be, just the left and right content div width setting is less than the total width can be achieved, note that width calculation must include their own set width + border Width +padding width +margin width.
Hint: in the div CSS production many times need to calculate such as the layout.
Example diagram:
To achieve the above effect, the total width of the tip is 200px, and the left and right layout has a border and a distance between the middle interval, here for the style so the distance is set relatively large.
CSS code:
| The code is as follows | Copy Code |
| . div-c{width:200px;} . div-a{float:left; width:50px border:1px solid #999; height:60px; . div-b{float:right; width:120px border:1px solid #999; height:60px; |
|
HTML code:
| The code is as follows | Copy Code |
| <div class= "Div-c" > <div class= "Div-a" ></div> <div class= "Div-b" ></div> </div> |
|
Complete DIV+CSS Code:
| The code is as follows | Copy Code |
| <! DOCTYPE html> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <TITLE>DIVCSS5 Case </title> <style type= "Text/css" > . div-c{width:200px;} . div-a{float:left; width:50px border:1px solid #999; height:60px; . div-b{float:right; width:120px border:1px solid #999; height:60px; </style> <body> <div class= "Div-c" > <div class= "Div-a" ></div> <div class= "Div-b" ></div> </div> </body> |
|
Description
1, the realization set total width is 200px (div-c), left and right div use Float:left to float (bureau left) and Float:right to float (bureau right), set border and width respectively
2, here set the left and right div block (that is, div-a and div-b) total width + border less than the total width (that is, div-c object width)
V. Summary
Set the distance between the div regardless of whether there is a distance between the objects, we all need CSS initialization, and there is a distance between the need to calculate the width, follow this death law set width and + border (border) +margin+padding less than equal to the total width, Otherwise it will cause the left and right structure layout dislocation, other comparison errors or differences.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
