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 optgroup Tag
The HTML <optgroup> tag allows you to group items in a dropdown list.
Determining Div Location
I generally get the location and dimension numbers of a div with the JavaScript getBoundingClientRect() function. Then access the numbers I need from the function's return value.
Site-wide Login System
A site-wide log-in system that lets pretty much any directory be password protected.
Image Show
With the no-custimizations-required script, it is now relatively easy to show off a series of images on your web page.
A Variables Dump
This PHP function returns details about the variable that is being dumped.
Handling CSV Files With PHP
Reading and writing CSV files with PHP is rather simple, compared to some other tasks.
Easy Random Image
This really is an easy way to implement random image selection.
