CSS Padding and width_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-20 07:34 出处：网络

Consider the next code: #container { width:500px; } #inside { padding:10px; width:100%; } If I choose width:10开发者_C百科0%; will it be the same as stating \"width 480:px\" (that is, calculating

相关专题：css

Consider the next code:

#container {
    width:500px;
}

#inside {
   padding:10px;
   width:100%;
}

If I choose width:10开发者_C百科0%; will it be the same as stating "width 480:px" (that is, calculating the padding already) or will it be as "width:500px"

Thanks

Joel

It will be like width:500px and adding the padding it will push the insides of overflow the #container..

But if #inside is a block element, then just giving the padding will make it behave as if it were width:480px

Example at http://www.jsfiddle.net/uA9LV/

It will be the same width as the parent container provided it's a block level element. So #inside will be 500px wide with 10px of padding on every side.

I put this in a sample document and the container div only resized 3 sides (left, top, and bottom).. and the inside div pushed it's boundaries outside of the container by 20px to the right.

I tested in IE8, Firefox 3.6.10, and the latest Chrome. Using various doctypes had no effect.

The code I used was:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
    <style>
        #container {
            width:500px;
            border: solid 1px blue;
        }

        #inside {
           padding:10px;
           width:100%;
           border: solid 1px red;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="inside">
        Hello World!
    </div>
</div>
</body>
</html>

Note: if you remove the Width declaration from the #inside div then you'll get exactly what you want. Which is an inner div that is 480px in width + 10px on each side for padding. See this link for more information on it: Solving the CSS Padding problem.