CSS Problem

[Forge]

Hey when i set a padding for a box all it does is increase the size of the box.
How do i stop this?

css code

padding: 5px;

Thread moved from Web design by --ss-- (Forum Super Moderator): Please post in the correct section :).

[Jme]

Just decrease the width of the box by the size of padding?

[--ss--]

Just decrease the width of the box by the size of padding?
That's what I normally do :eusa_whis

[kk.]

Just decrease the width of the box by the size of padding?
same here, decrease it by 5

[Forge]

Thanks, ive never had this problem before

[RYANNNNN]

Probably because you aren't coding properly, I also used to change the width of the box, but I use the correct attributes and stuff now.

e.g..

<div class="box">
content here
</div>

assuming the box class has no padding styled, and you just add padding: 5px, the box changes size/shape (cant remember exactly)

however, using...

<div class="box">
<p>proper element or whatever</p>
</div>

then in the css ... .box p { padding: 5px; }

everything is resolved

[MrCraig]

Could you not just use margin instead of padding :S?

[RYANNNNN]

http://webdesign.about.com/od/faqsandhelp/f/bl_faq5_7a.htm

[kk.]

Could you not just use margin instead of padding :S?
no because the margin is how far away from other attributes. padding will indent stuff in the current box so its the same as an indent but moves all text/images

[DUB]

Or alternatively you can create a wrapper and put margin on the layers within it.