Width calculation of div layout and comparison of different browsers

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags beginners browsers clear code compared different html html code

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.