CSS Padding and width
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.
加载中,请稍侯......
精彩评论