HTML 5

Browser Differences: Width Padding Margin


WAI-AAA

The W3C and the WAI are international communities that develop standards to ensure the long-term growth of the Web. Adhering to international "standards" is very important. It allows everyone to develop applications, webware, and browsers that work on all types of Internet enabled devices; they are the backbone of the Internet.


There is however a difference between Internet Explorer and other browsers. This page tries to simply explain these differences so that you can build webpages that are both W3C compliant and render correctly in Internet Explorer.


W3C defines "width" and "height" as the area where the text/image content fits (the lime area below); padding, margin and border are all outside this region. Internet Explorer treats the "width" and "height" to define the size of the content, padding and border area combined.

Please study the diagram below. The white space between the black border and the red border is "Margin", orange is "Padding" and lime is content area. You probably wouldn't usually have this separate lime "div" to contain the content. We have put this in to highlight the content area in colour and for reasons that will become apparent later on.


Browser Differences Test Case

Internet Explorer Non-Standards Compliant Browser

Opera W3C Standards Compliant Browser

Firefox W3C Standards Compliant Browser

Safari W3C Standards Compliant Browser

SeaMonkey W3C Standards Compliant Browser

To make a webpage that renders the same in all browsers specify any "width" and "height" in the element that contains the text/image content, and have a separate wrapper to handle any "margin" and "padding".


The following makes Internet Explorer render the same as the W3C compliant browsers.
Note: We have simply moved the "width" declaration down into the content container.


Browser Differences: Width Padding Margin Differences


Summary


Margin is never included in a defined "width" and "height" region; it defines the gap to leave between elements.

Internet Explorer takes "width" and "height" to be the total area including padding and border.

Firefox, Opera, Safari, SeaMonkey and other W3C compliant browsers take "width" and "height" to define just the text/image content area. With W3C compliant browsers, padding and border are outside the defined "width" and "height" region.


Conclusion


If you are having problems with:

<div style="margin: 10px; padding: 10px; width:100px">Our text / image content</div>

move "margin" and "padding" to a separate wrapper:

<div style="margin: 10px; padding: 10px">
 <div style="width:100px">Our text / image content</div>
</div>

depending in your project you may want to search the web for "X-UA-Compatible" which can go in a head meta tag. This instructs Microsoft browsers before "Edge" to use Standards-Compliant Mode to render the page. Please be aware that the correct format of the tag is:
<meta http-equiv="X-UA-Compatible" content="......" />
(not value=")


Check Your Web Browser


You can check your web browser is Standards Compliant with our .

 
Browser Differences: Width Padding Margin Differences on Twitter Browser Differences: Width Padding Margin Differences on Facebook Browser Differences: Width Padding Margin Differences on LinkedIn Browser Differences: Width Padding Margin Differences on NotePage Note this page enquiriesforbrains.co.uk
+44 7703 184 699
A ForBrains Ltd Optimised Website, Web Content Management System
Connected via IPv4 from 34.229.223.223
Tuesday 2024-78.37510
Copyright © 2016 ForBrains Ltd. All Rights Reserved.
It is 19/03/24 09:00 and 10o heavy intensity drizzle; later Drizzle, tomorrow . Wind Direction: S 170o, 13 mph. Sunrise: 06:15. Sunset: 18:22
ForBrains Ltd RSS
Browser Differences: Width Padding Margin Differences
Go Mobile
 
live online chat
login ▼