Results 1 to 2 of 2

Thread: CSS Borders and Overall Width

  1. #1
    Join Date
    Mar 2011
    Location
    Toronto, ON
    Posts
    46

    CSS Borders and Overall Width

    Hi Guys,

    Quick question. I was wondering if adding a border onto a div actually increases the height/width of it?

    For example, if I have a div with a class of "container" and in css I set the container to a width of 600px, and then add a border of 10px, is the border within the div or around the outside?

    If it does go around the outside than I guess my div is actually 620px wide (10px border on each side)?
    InCheck Web Designs
    www.incheck.ca

  2. #2
    Join Date
    Feb 2011
    Location
    Malaysia
    Posts
    130


    Width or height that you set is actually just the dimension of the content area itself. Padding, border and margin don't belong to that dimension.

    Example: Let say you make a box with 600px width and 400px height, then a padding of 20px in all direction, border of 5px and margin 10px all around, then the space that you need is:

    Width needed = 600px (content) + 40px (padding) + 10px (border) + 20px (margin)

    Height needed = I guess you knew
    Need help on XHTML or CSS? PM me

Similar Threads

  1. css width:100% background images
    By alexgallz in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 04 Feb 2010, 02:29 AM
  2. Custom table borders with CSS
    By Dioxide-Angel in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 14 Aug 2009, 12:53 AM

Posting Permissions

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