/    Sign up×
Community /Pin to ProfileBookmark

About Padding and Margin

Copy linkTweet thisAlerts:
Jul 01.2010

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

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaJul 01.2010 — 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>
[/CODE]

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.
Copy linkTweet thisAlerts:
@naquiauthorJul 01.2010 — Thanks Tirna,

But if I change the outer div padding value will it change the overall width?
Copy linkTweet thisAlerts:
@tirnaJul 01.2010 — 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.
Copy linkTweet thisAlerts:
@naquiauthorJul 01.2010 — Thank you tirma.

I got it!

If I give a style for div like this
[code=html]<div style="width : 200px;padding: 10px;">
Content here---
</div>[/code]
The overall width will become 220px;
×

Success!

Help @naqui spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...