fixing div extra width

how to fix padding extra width and height in div tag

[jcodemasters]

Hello all,
i am having problem with extra width and height added in div tag when I use padding.

please see the attached image

CSS code

<style>
.green-bg {
background: url("images/green_bg.gif") no-repeat;
width: 170px;
height: 24px;
color:#FFFFFF;
font-size:13px;
font-weight:bold;
padding-top: 3px;
padding-left: 10px;
}
</style>
<div class="green-bg">
 Green Bg
</div>

I know a quick fix.. but this requires two div tags.. i think this is not the professional way to fix it.. if i am not wrong?

Thanks

[marcel]

Css Box model: [w3.org...]

The padding is always going to be added to the div size, the easiest way is to subtract the padding from the width and height, ie.:

width: 160px;
height: 21px;

* Edit: AFAIK this is not the case in IE5, where your code will work fine. but who still uses IE5? ;)

[jcodemasters]

does the same rule apply on LI? for some reason proper padding is not being applied to LI