- 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:
- Let’s take an example of an HTML page.
- Say the HTMLpage name is boxModelDemo.html,
<title>Box Model Demo</title>
border : 10px solid orange;
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,
var object = $('.object'),
widthOfObject = $(object).width();
alert("Width of Object : "+ widthOfObject);
- 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"
Now executing the width code,