CSS HTML Margin and Padding property
I am using CSS to create a 3-column page layout with header and footer. Take the Left_Col div, for example, which has a width of 200px. I would like to have a left and right padding of 10px for this div such that the text within the Left_Col essentially starts at pixel 10 and wraps at pixel 190.
In the below example, to acheive this, I create another NEST DIV within the Left_COL div and set the margin to StdMargin (10px). This works, but I thought of another alternative to achieve the same result, namely to forgo the inner "stdMargin" inner div and to add a "padding 10px" attribute on the Let_Col div. However, I was disappointed that this seemed to INCREASE the width of the LEFT_COL div beyond its defined 200px width and thereby overlapping with the middle CONTENT div, which is not what I wanted.
Why does this happen? Is there a way to avoid th nested inner div? Too many nested objects and I start seeing crossed eyed...
Here is my css page:
/* CSS layout */
body {
/*
margin: 0;
padding: 0;
*/
margin: 0 auto;
width: 1000px;
}
#masthead {
background-color:aqua;
}
#top_nav {
background-color:Yellow;
}
#container {
background-color:maroon;
}
#left_col {
width: 200px;
float: left;
background-color:#99FF33;
}
#page_content {
margin-left: 200px;
margin-right: 200px;
background-color:#99CCFF;
}
#right_col {
width: 200px;
float: right;
background-color:#F1E2E0;
}
#footer {
clear: both;
background-color:#BBBBFF;
}
.stdmargins{
margin:5px;
}
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<title>masthead</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="3Column.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="PageWidth">
<div id="masthead">
</div>
<div id="top_nav">
<div class="stdmargins">
Top Nav</div>
</div>
<div id="container">Container
<div id="left_col">
<div class="stdmargins">
Left Column Top<br /&g开发者_运维百科t;
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Left Col bottom<br />
</div>
</div>
<div id="right_col">
<div class="stdmargins">
Right top<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Right bott<br />
</div>
</div>
<div id="page_content">
<div class="stdmargins">
</div>
</div>
</div>
<div id="footer">
Footer</div>
</div>
</body>
</html>
Subtract the padding from the width. So if you want the div to end up being 200px wide, it's:
padding: 10px;
width: 180px; /* 200 - 10 - 10 */
This diagram is helpful: http://www.w3.org/TR/CSS21/box.html#box-dimensions
According to the CSS Box Model spec, the default behavior to an element which has padding applied is to increase its width and height. That said, you'll always have to worry about the element's dimension and decrease the width according to the amount of left and right paddings you have applied. For ex: if you've got a div with 200px and a padding of 10px, the total width will be 220px.
However, you can change this behavior by setting the "box-sizing" CSS3 rule, that makes your element to not sum up the padding to the final width/height. You can check mozilla's page on the subject: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing.
But be warned: it doesn't work in old browsers like IE 7, for example. If backward compatability is not a problem for you, go straight for it.
There is a workaround, if you don't want to subtract your column's width/height from the padding width: you can create a wrapper div inside it and apply the padding to it or attach the padding to the inner elements, not the parent div itself.
<div id="column" style="width: 200px">
<ul style="padding: 10px">
<li>Some text</li>
<li>Some more text</li>
<li>Even more text</li>
</ul>
</div>
This way you won't need to worry about recalculating the elements dimensions when you need to change the padding size, for example.
加载中,请稍侯......
精彩评论