www.webdeveloper.com
Results 1 to 5 of 5

Thread: About Padding and Margin

  1. #1
    Join Date
    Sep 2008
    Posts
    10

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

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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.

  3. #3
    Join Date
    Sep 2008
    Posts
    10
    Thanks Tirna,

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

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    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.

  5. #5
    Join Date
    Sep 2008
    Posts
    10
    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;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles