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?
Jump to PostI'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.
Jump to PostIt 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 …
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...
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:
<!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>This means that for an image in IE in quirks mode, padding is simply ignored.
This makes sense. I was testing with a doctype in EI6 btw.
IE 5.x always subtracts padding, regardless of doctype.
It doesn't support padding for images, like 6 in quirks mode.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.