CSS Problem

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

Code:

---

padding: 5px;

---

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

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

Quote:

---

Originally Posted by Jme

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

---

That's what I normally do :eusa_whis

Quote:

---

Originally Posted by Jme

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

---

same here, decrease it by 5

Thanks, ive never had this problem before

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

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

http://webdesign.about.com/od/faqsan...bl_faq5_7a.htm

Quote:

---

Originally Posted by MrCraig

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

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