About Padding and Margin

what is the difference between padding and width.

When I give some value for padding, it increases the width of a particular 'div'. Can't we give internal padding by keeping the width fixed (I mean is there any way to keep the width fixed though we increase the padding value).

I would do something like this:

Code:

---


<div style="width: 300px">
 
    <div style="padding: 20px 20px 20px 20px">
            your content for this div
    </div>
 
</div>

---

in this case, the overall width will remain at 300px if you change the padding on the inner div.

The CSS Box Model might explain a bit more.

Thanks Tirna,

But if I change the outer div padding value will it change the overall width?

it will depend on whether the outer div is itself enclosed in a fixed width container or not.

The quickest way to learn imo is to maybe write up some quick test code like I posted and play with the css and see what happens. Maybe have a read through the link I posted as well.

put a border around the divs so you can see what happens to their size.

Thank you tirma.

I got it!
If I give a style for div like this

HTML Code:

---

<div style="width : 200px;padding: 10px;">
  Content here---
</div>

---

The overall width will become 220px;