A thinking of margin optimization in DIV+CSS Web page layout

css| Web | optimization

Margin is one of the most commonly used properties in CSS layouts, but if not properly used, it tends to produce too much junk code, allowing our coding volume to grow. Today we introduce a small example of coding optimization, through this example, we hope that you can realize that the path of code optimization is a variety of, but also a primer to the introduction bar.

Look at the XHTML code:

Look at the following CSS code: (Not optimized)

#main {
margin:5px 0px 5px 0px;
}
#body1 {
margin:12px 0px 10px 0px;
}
#content {
margin:8px 0px 2px 0px;
}
#body2 {
margin:10px 0px 15px 0px;
}

With Dreamweaver to set the CSS, should belong to this category, it is not optimized, a lot of code is redundant, because software is software after all, has not been able to do some thinking for people. We optimize the CSS above.

Look at the following optimized CSS code:

#main {}
#body1 {
margin-top:17px;
}
#content {
margin:8px 0px 2px 0px;
}
#body2 {
margin:20px 0px;
}

Let's analyze the idea of optimization: first #main{margin:5px 0px 5px 0px; is not necessary, he is nothing more than the definition of the entire page of the top and bottom margin (in a certain situation but need to write). We can also set it by defining the top margin of the #body1 and the bottom margin of the #body2, so that the #body1{margin-top:17px is available. and #body2{margin:20px 0px;} (This is defined as the #body2 of the upper and lower margins of 20px, the left and right margins of 0px, is also abbreviated as a way.) In the same way, we can omit the bottom margin of the #body1, define the top margin in the #content layer, and then we need to figure out the nesting relationship of the layers first, otherwise it's easy to make your thinking very unclear.