 |  |  |  |  |  |  |  |
Padding and margins
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
•
•
Join Date: Feb 2002
Posts: 12,056
Reputation: 
Solved Threads: 127
With regards to cellpadding and cellspacing for tables, and padding and margins for div tags, are they included or excluded in the height and width of a table cell or element?
For example, suppose I have an image of size 100x200 that I would like to enclose in a fixed width div tag with 5px of padding. Must I set the height and width of the div tag to 110x210 to accomidate?
For example, suppose I have an image of size 100x200 that I would like to enclose in a fixed width div tag with 5px of padding. Must I set the height and width of the div tag to 110x210 to accomidate?
Dani the Computer Science Gal 
Follow my Twitter feed! twitter.com/DaniWeb
And if you're interested in Internet marketing there is twitter.com/DaniWebAds
Follow my Twitter feed! twitter.com/DaniWeb
And if you're interested in Internet marketing there is twitter.com/DaniWebAds
I'm pretty sure that putting 5px of padding will not change the size of the image. If you set the size of the image to 100x200, the image itself will stay at 100x200 but it will take 110x210 because of the 5px on each sides.
If I read your query correctly, it's the box model problem.
As I remember it, Mozilla takes the width and adds padding and margins, whilst IE takes the width and subtracts padding and margins...
So the answer is yes and no. lol
I believe some people use a strict doctype and the problem doesn't occur.
I just nest two divs, one with the width and one with margins/padding.
I haven't tested it, but I believe patate is correct that an image shouldn't change size when you add margins...
As I remember it, Mozilla takes the width and adds padding and margins, whilst IE takes the width and subtracts padding and margins...
So the answer is yes and no. lol
I believe some people use a strict doctype and the problem doesn't occur.
I just nest two divs, one with the width and one with margins/padding.
I haven't tested it, but I believe patate is correct that an image shouldn't change size when you add margins...
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
I don't know about Mozilla but IE adds it. The image doesn't change size. It just adds the padding around the image and the size of the div changes. But that's with IE, I'm not sure about Mozilla...
It appears that for a div, IE in standards mode (with a strict or transitional doctype) adds padding and margins to the width.
In quirks mode, without a doctype or with an incomplete doctype, it subtracts them.
Mozilla adds them all the time.
I don't think this is the same for IE5 though. Maybe I'll test it out later.
Try testing this page with and without a doctype:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test page</title>
<style type="text/css">
<!--
#first {
border: 1px solid #000;
width: 200px;
}
#second {
border: 1px solid #000;
padding: 50px;
width: 200px;
}
-->
</style>
</head>
<body>
<div id="first"> </div>
<div id="second"> </div>
</body>
</html>[/HTML]
This means that for an image in IE in quirks mode, padding is simply ignored.
In quirks mode, without a doctype or with an incomplete doctype, it subtracts them.
Mozilla adds them all the time.
I don't think this is the same for IE5 though. Maybe I'll test it out later.
Try testing this page with and without a doctype:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test page</title>
<style type="text/css">
<!--
#first {
border: 1px solid #000;
width: 200px;
}
#second {
border: 1px solid #000;
padding: 50px;
width: 200px;
}
-->
</style>
</head>
<body>
<div id="first"> </div>
<div id="second"> </div>
</body>
</html>[/HTML]
This means that for an image in IE in quirks mode, padding is simply ignored.
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
IE 5.x always subtracts padding, regardless of doctype.
It doesn't support padding for images, like 6 in quirks mode.
It doesn't support padding for images, like 6 in quirks mode.
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
|
Similar Threads
- Align floated images in center of page with CSS (HTML and CSS)
- Margin below list (HTML and CSS)
- Amazing Website Designs - How do they do this? (Site Layout and Usability)
- Layout in CSS (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: Overfloat? IE6/win?
- Next Thread: O/T. HTML printing problem..........
| Thread Tools | Search this Thread |
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
Related Forum Features
Tag cloud for HTML and CSS
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity create css design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl
