943,688 Members | Top Members by Rank

Ad:
Apr 8th, 2005
0

Padding and margins

Expand Post »
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?
Similar Threads
Administrator
Staff Writer
Reputation Points: 1422
Solved Threads: 162
The Queen of DaniWeb
cscgal is offline Offline
13,645 posts
since Feb 2002
Apr 8th, 2005
1

Re: Padding and margins

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.
Reputation Points: 12
Solved Threads: 0
Posting Whiz
Patate is offline Offline
303 posts
since Apr 2005
Apr 8th, 2005
0

Re: Padding and margins

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...
Reputation Points: 54
Solved Threads: 20
Master Poster
DaveSW is offline Offline
765 posts
since Jul 2004
Apr 8th, 2005
0

Re: Padding and 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...
Reputation Points: 12
Solved Threads: 0
Posting Whiz
Patate is offline Offline
303 posts
since Apr 2005
Apr 8th, 2005
1

Re: Padding and margins

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">&nbsp;</div>
<div id="second">&nbsp;</div>
</body>
</html>[/HTML]

This means that for an image in IE in quirks mode, padding is simply ignored.
Reputation Points: 54
Solved Threads: 20
Master Poster
DaveSW is offline Offline
765 posts
since Jul 2004
Apr 8th, 2005
0

Re: Padding and margins

This makes sense. I was testing with a doctype in EI6 btw.
Reputation Points: 12
Solved Threads: 0
Posting Whiz
Patate is offline Offline
303 posts
since Apr 2005
Apr 8th, 2005
0

Re: Padding and margins

IE 5.x always subtracts padding, regardless of doctype.

It doesn't support padding for images, like 6 in quirks mode.
Reputation Points: 54
Solved Threads: 20
Master Poster
DaveSW is offline Offline
765 posts
since Jul 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Overfloat? IE6/win?
Next Thread in HTML and CSS Forum Timeline: O/T. HTML printing problem..........





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC