Padding Makes Div Dimensions Larger
Firefox, Safari, Chrome, and Opera, both Mac and PC, enlarge the dimension of the div by the amount of the padding when styled as below. IE does not in quirks mode, but does when the page has a value DOCTYPE. (A div with no padding provided for comparison.)
<div style="width:100px; border:1px solid black;">content</div>
<div style="width:100px; border:1px solid black; padding:0 5px 0 5px;">content</div>
Styled as below will publish the size of the div the same in each of the mentioned browsers.
<div style="width:100px; border:1px solid black;">
<div style="margin:0 5px 0 5px;">content</div>
</div>
If your divs use padding and the dimensions of divs must be the same across browsers, the above is a solution.
Will Bontrager
Was this blog post helpful to you?
(anonymous form)
All information in WillMaster Blog articles is presented AS-IS.
We only suggest and recommend what we believe is of value.
As remuneration for the time and research involved to provide quality links,
we generally use affiliate links when we can.
Whenever we link to something not our own, you should assume
they are affiliate links or that we benefit in some way.
Recent Articles in the Library
The HTML address Tag
The address tag is used to present an address to the site user. It also makes the address available to website search engines.
Rotate
The CSS 'rotate' property is a versatile way to rotate elements.
Building a URL to Self With PHP
PHP has all the parts to build the URL it was accessed with.
Easier Field Information Change
How to "select the field when the field is tapped into" for your own forms.
File Uploader
This file uploader is complete as one PHP script. No external modules or classes are required. Optional login for private use.
Fun Jumper
This fun jumper is easy to implement. Paste the code into one of your web pages. When you are ready to define your own content, replace the image tag.
The HTML optgroup Tag
The HTML <optgroup> tag allows you to group items in a dropdown list.
