Box Model in IE and FF -Tutorial Savvy

Box Model:

Whenever an HTML element is rendered in browser it follows the box model to place it in browser.

In Browser an element is defined by it padding, border and margin.

Padding and Border is for self-placement and margin determines the distance from its parent.

Components of an Element:

Example:

Let’s take an example of an HTML page.

Say the HTMLpage name is boxModelDemo.html,

<html> 
<head>
  <title>Box Model Demo</title>
  <style type="text/css">
/*<![CDATA[*/
  .parent{
  background-color: Wheat;
  height: 250px;
  width: 250px;
  }
  .object{
  height: 100px;
  width:100px;
  }
  .object{
  border : 10px solid orange;
  margin:20px;
  padding:25px;
  }
  /*]]>*/
  </style>
</head>

<body>
  <div class="parent">
    <div class="object">
      Sandeep
    </div>
  </div>
</body>
</html>

Output in Browser for the above Code:-

The Display of the element in browser shows the border and margin properly. The padding is too applied here but as it is self-constrained we cannot see mark for it.

The layout for IE developer tool and Firefox web developer tool,

From the above boxes, we can see the interpretation of Firefox and IE is entirely different. Firefox considers the element object as 100*100 whereas IE consider it as 123*100 as a whole.

Yes there is an open issue of additional 3 px in IE.

Now if we will use some JQUERY code for width calculation,

<script src="http://code.jquery.com/jquery1.8.3.min.js"></script>
  <script>
  $(document).ready(function(){

   var object = $('.object'),

        widthOfObject = $(object).width();

   alert("Width of Object : "+ widthOfObject);
})
  </script>

The output in Firefox is 140 while in IE it is 53,

In IE padding and border is not considered for calculating, So the calculation happens like this Total box (123*100) , padding (left:25, right:25 = 50) and border (left:10,right:10 = 20). So padding and border in total is 50+20 = 70.Hence remaining from box is 123 -70 = 53.

If we will use some doc type in the HTML, let’s use strict document type XHTML,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Now executing the width code,

Jan 8, 2013Sandeep

Box Model in IE and FF

Box Model:

Components of an Element:

Example:

Output in Browser for the above Code:-

Related

Sandeep