如果使用 960 网格系统，如何添加不改变宽度的填充和边框

Question

我正在使用 960.gs grid_3 制作一行 4 个元素，使用 grid_4 制作一行 3 个元素。我在 grid_3 和 grid_4 中添加了填充。它们不再适合行，因为填充被添加到宽度。如果我添加边框，也会发生同样的情况。我明白了，这就是 css 的工作原理。有没有解决的办法？我真的很想要 4 grid_3 元素（或 3 grid_4 元素）在一行中带有填充和边框。这是我添加填充或边框后得到的屏幕截图。图片显示边框大小写。

这是代码：

//html

<!DOCTYPE html>
<html>
  <head>
<!--   <link rel="stylesheet" type="text/css"  href="css/960_12_col_rtl.css"> -->
  <link href="css/custom.css" type="text/css" rel="stylesheet">
  </head>
    <body>
    <div class="container_12 clearfix">
        <div id="header" class="grid_12">
            <h1>HUHUHUHU</h1>
        </div>
        <div id="comment1" class="grid_3">
            <p>This is comment 1!</p>
        </div>
        <div id="comment2" class="grid_3">
            <p>This is comment 2!</p>
        </div>
        <div id="comment3" class="grid_3">
            <p>This is comment 3!</p>
        </div>
        <div id="comment4" class="grid_3">
            <p>This is comment 4!</p>
        </div>

        <div id="leftImage" class="grid_4">
            <p id="image1">image1</p>
        </div>      
        <div id="centerImage" class="grid_4">
            <p id="image2">image2</p>
        </div>
        <div id="rightImage" class="grid_4">
            <p id="image3">image3</p>
        </div>
    </div>
    </body>
</html>

//css:

@import url("960_12_col.css");

#header{
background-color: blue;
height: 400px;
margin-bottom: 30px;
}
.grid_4{
text-align: center;
background-color: red;
margin-top: 30px;
height: 250px;
border: 20px solid black;
}
.grid_3{
/* padding:30px; */
border: 5px solid black;
margin: 10px;
height: 140px;
}
#comment1{
text-align: left;
}
#comment2{
text-align: center;
}
#comment3{
text-align: center;
}
#comment4{
text-align: right;
}

Answer 1

听起来您正在寻找 box-sizing 属性。

使用值 border-box 将确保您在 CSS 中为元素设置的尺寸包括该元素的填充和边框。

如果使用 960 网格系统，如何添加不改变宽度的填充和边框

How to add padding and border that doesn't change width if using 960 grid system

html

css

960.gs