Compared with the traditional table layout and frame layout, div layout has the advantages of easy layout, convenient revision, flexible style definition, simple and clear HTML code, and easy JavaScript manipulation. At the same time, for some beginners, always encounter a variety of problems, such as the width of the div or the height of the calculation problem.
Let's explore the attributes that affect div width or height.
div breadth = width + padding + border + margin
It may be a little hard to understand from a single formula, and we'll look at it by testing the code and screenshots. In order to test the results of intuitive observation, we only test one side, that is, the left side, that is, the original padding, border, margin width of the calculation, are both left and right, here only to test the left side, the same as the right.
<?xml version= "1.0" encoding= UTF-8 "?>"
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type content=" HTML; Charset=utf-8 "/>
<title> Test div width </title>
<style type= "Text/css" >
#container {
/* Left reference line */
border-left:1px solid #B23AEE;
}
/* Defines the public properties of each layer/*
#div1, #div2, #div3, #div4 {
width:200px;
height:50px;
background: #FFE1FF;
margin-bottom:5px;
}
/* Only width */
#div1 {
}
/* Plus border * *
#div2 {
border-left:10px solid red;
}
/* plus border and padding * *
#div3 {
border-left:10px solid red;
padding-left:50px;
}
/* plus border, padding and margin * *
#div4 {
border-left:10px solid red;
padding-left:50px;
margin-left:50px;
}
</style>
</head>
<body>
<div id= "container" >
<div id= "Div1" >
Heart Dream Sail Shadow Heart Dream Sail Shadow Heart Dream Sail Shadow Heart Dream Sail Shadow
</div>
<div id= "Div2" >
Heart Dream Sail Shadow Heart Dream Sail Shadow Heart Dream Sail Shadow Heart Dream Sail Shadow
</div>
<div id= "Div3" >
Heart Dream Sail Shadow Heart Dream Sail Shadow Heart Dream Sail Shadow Heart Dream Sail Shadow
</div>
<div id= "Div4" >
Heart Dream Sail Shadow Heart Dream Sail Shadow Heart Dream Sail Shadow Heart Dream Sail Shadow
</div>
</div>
</body>
</html>
we tested in Firefox, screenshots are as follows:
Let's analyze the DIV4, as shown below:
Against the above code and screenshot, we can clearly understand the "div width = breadth + padding + border + margin" this formula.
For Web front-end developers, the biggest headache is due to browser differences caused by the difference in Web page display, and for this width calculation formula, in other browsers will not be incompatible with the problem?
Fortunately, most of the commonly used browsers, I have installed on the machine, the test results: in Firefox, Opera, Google, IE8, IE7 display is the same as the screenshot above, that is, in these browsers, the width of the calculation formula is:
div breadth = width + padding + border + margin
And in the IE6 test, the result is not the case, see the running screenshot:
As can be seen from the above figure, the width of the IE6 is calculated:
div width = breadth + margin
and border and padding, occupy the position of width. This should be noted in front-end development.
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
