954,598 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Padding and margins

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?

cscgal
The Queen of DaniWeb
Administrator
19,437 posts since Feb 2002
Reputation Points: 1,474
Solved Threads: 231
 

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.

Patate
Posting Whiz
303 posts since Apr 2005
Reputation Points: 12
Solved Threads: 0
 

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...

DaveSW
Master Poster
769 posts since Jul 2004
Reputation Points: 54
Solved Threads: 20
 

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...

Patate
Posting Whiz
303 posts since Apr 2005
Reputation Points: 12
Solved Threads: 0
 
DaveSW
Master Poster
769 posts since Jul 2004
Reputation Points: 54
Solved Threads: 20
 

This makes sense. I was testing with a doctype in EI6 btw.

Patate
Posting Whiz
303 posts since Apr 2005
Reputation Points: 12
Solved Threads: 0
 

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

It doesn't support padding for images, like 6 in quirks mode.

DaveSW
Master Poster
769 posts since Jul 2004
Reputation Points: 54
Solved Threads: 20
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You