Question

我正在尝试为学校网站构建HTML原型并遇到问题。当我应用填充：5px;对于像.newscast或.photo_gallery这样的元素，它会抛弃整个网站。它使每边的元素更大！填充应该从内部而不是从外部推动。尝试只添加一些填充到任何嵌套元素，它会发生！我不知道该怎么做，但我已经包含了我的代码而没有应用填充。

感谢您的帮助。

HTML：

<!DOCTYPE HTML>

<html>
<head>
<link href="normalize.css" rel="stylesheet" type="text/css">
<link href="grid.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<header>
    <div class="header grid_10">
        <h1>Dummy Text</h1>
    </div>

    <div class="main-menu grid_10">
    </div>
</header>

<body>
    <div class="news_reel grid_5">
        <div id="latest_news" class="grid_10">
            <h1>Dummy Text</h1>
        </div>

        <div class="old_news grid_10" id="old1">
            <h1>Dummy Text</h1>
        </div>

        <div class="old_news grid_10" id="old2">
            <h1>Dummy Text</h1>
        </div>

        <div class="old_news grid_10" id="old3">
            <h1>Dummy Text</h1>
        </div>

        <div class="old_news grid_10" id="old4">
            <h1>Dummy Text</h1>
        </div>
    </div>

    <div class="right_bar grid_5">
        <div class="grid_10" id="newsletter">
            <h1>Dummy Text</h1>
        </div>  

        <div class="grid_10" id="photo-gallery">
            <h1>Dummy Text</h1>
        </div>

        <div class="grid_10" id="newscast">
            <h1>Dummy Text</h1>
        </div>
    </div>
</body>

<footer>
    <div class="grid_10 footer_bar">
    </div>

    <div class="grid_10 footer">
        <h1>Dummy Text</h1>
    </div>
</footer>


</html>

CSS：

.header {
    height: 180px;
    margin: 0 auto;
    background: #e5e5e5;
}

.main-menu {
    height: 50px;
    margin: 0 auto;
    background: #1800ea;
}

.news_reel {
    margin: 0 auto;
    float: left;
}

#latest_news {
    height: 400px;
    margin: 0 auto;
    background: #c61111;
}

.old_news {
    height: 200px;
    margin: 0 auto;
}

#old1 {
    background: #295f16;
}

#old2 {
    background: #2527a1;
}

#old3 {
    background: #0da19f;
}

#old4 {
    background: #d00aa5;
}

.right_bar {
    margin: 0 auto;
}

#newsletter {
    height: 400px;
    margin: 0 auto;
    background: #ed337e;
}

#photo-gallery {
    height: 400px;
    margin: 0 auto;
    background: #65005c;
}

#newscast {
    height: 400px;
    margin: 0 auto;
    background: #ebc800;
}

.footer_bar {
    height: 50px;
    margin: 0 auto;
    background: #1800ea;
}

.footer {
    height: 180px;
    background: #e5e5e5;
    margin: 0 auto;
}

Answer 1

默认情况下，填充确实会扩大元素的边界。如果您想更改该用途：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

如果您想使用＆lt; = IE8，请相应地调整框的宽度。

或者，如果你想坚持使用grid.css，你可以在每个当前div内放置一个div并设置内部div的边距，但是这不是最干净的解决方案。

Answer 2

存在两种不同的box-sizing模式，这些模式会影响填充的工作方式。默认模式增加元素的大小。

有关详细说明，请参阅http://quirksmode.org/css/user-interface/boxsizing.html。

Padding会把我的整个网站丢掉吗？

2 个答案: