如何正确地使用div的padding？

Question

如何正确地使用div的padding？

5

我想在一个被另一个div（“container”）包裹的div中使用padding，很抱歉这个问题很简单，但我找不到答案。

只要我不使用padding:10px;页面的结构就是稳定的。即右侧的div浮动到左侧（“content”在“sidebar”旁边）。

<html>
<head>
<style type="text/css">
.container {
max-width: 960px;
background-color: RED;
height: 200px;}

.sidebar {
background-color: GREEN;
width: 30%;
float: left;}

.content {
background-color: YELLOW;
float: left;
width: 70%;
padding: 10px;}
</style>
</head>

<body>
    <div class="container">
    <div class="sidebar">
    <p>text in sidebar</p>
    </div>
    <div class="content">
    <p>text in content</p>
    </div>
    </div>

</body>
</html>

当使用padding:10px;时，右边的div（“content”）会下移，而不是浮动在“sidebar”的旁边。

我尝试过clear：left;（right，both），但没有帮助我。

对于上述问题，如果不以<p>为特定样式的话，任何解决方案都将不胜感激。

- blsn

4个回答

1

这种行为是完全正确的。请记住所谓的盒子模型（简称）：

外边距、边框和内边距都将添加到宽度值中

在这种情况下，您需要进行计算。

30% + 10px + 70% + 10px = 100% + 20px

浏览器开始支持CSS属性box-sizing（有关更多信息，请参见https://developer.mozilla.org/en-US/docs/CSS/box-sizing）。您可以将其设置为border-box以更改默认的盒子模型。

但是请记得也要使用那些浏览器后缀。

box-sizing: border-box;
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box;

- Lars Knickrehm

0

这是一个常见的问题，典型的网页设计并不按照我们通常的逻辑方式运作。

实际上发生的情况是填充使得 .content div 比其分配的空间更宽，从而迫使其下移。

有几种方法可以解决这个问题。

这个规则：box-sizing:border-box; 使得如果你设置了 width:100px 和 padding:10px;，浏览器会自动将整个 DIV 设置为 100px，无论如何。

实际上发生的情况是 DIV 变成了 80px 宽，两侧各有 10px 的填充。

我创建了一个 jsfiddle。

这个规则的浏览器支持通常非常好，但请确保包含我在 js 中添加的所有规则（即带有 -webkit-、-moz- 的规则和上面的 box-sizing:border-box;）。

参考所有规则如下：

 box-sizing:border-box;
 -moz-box-sizing:border-box; 
 -webkit-box-sizing:border-box;

- Alexander Wigmore

如果你使用这个，请注意浏览器兼容性。我们开发者习惯了不错的浏览器，但大多数用户仍在使用（旧版本的）IE。我会选择@cypressFrankenfeld提供的解决方案！ - Pevara

1

兼容性相当好。如果要支持IE 7，则使用手动模式将DIV的宽度设置为所需宽度减去padding*2。 - Alexander Wigmore

0

所有其他答案（截至2020年9月10日）都集中在将填充添加到.content DIV 使其大于所需的70％，导致它被推到.sidebar DIV下面，然后尝试使DIV大小为70％，包括填充。最简单的答案是不要填充.content DIV（因此它保持在.container DIV的70％），而是填充其中的P。没有宽度规定，内部的P是DIV的100％，包括填充，因此P的文本将相应地压缩（到.content DIV的100％ - 每侧10px）。所以改变

.content {
background-color: YELLOW;
float: left;
width: 70%;
padding: 10px;}

到

.content {
background-color: YELLOW;
float: left;
width: 70%;}

.content p {
padding: 10px;}

或者，将box-sizing: border-box添加到.content样式中，可以改变尺寸计算方式以包括填充，但这是CSS3，而将填充移入P在早期版本中有效。（还有人在使用吗？）

经过测试，我只有一个（修辞性的）问题。为什么要同时浮动两个DIV？如果您只浮动.sidebar DIV，那么.content DIV中的额外文本将流动到其下方（宽度现在从.container DIV的左侧边缘开始）。通过同时浮动两个，.content DIV中的额外文本保持在右侧，留下了.sidebar DIV下方的空白区域（如果其中的内容少于.content DIV）。我认为这是有意图的，但这与使用双列表格产生完全相同的效果。

<html>
<head>
<style>
.table_container {
width: 100%;
max-width: 960px;
background-color: RED;}

.table_sidebar {
background-color: GREEN;
width: 30%;}

.table_content {
background-color: YELLOW;
width: 70%; /* unnecessary */
padding : 10px;}
</style>
</head>
<body>
<table class="table_container">
<tr>
<td class="table_sidebar">text in sidebar</td>
<td class="table_content">text in content</td>
</tr>
</table>
</body>
</html>

这种方法与原始的（浮动的DIV）解决方案有一些细微的差别。

每个单元格周围都有一个小间隙。
侧边栏与内容高度相同。
表格的高度仅为其内容高度（可能小于指定的200px）。
TD的内容没有上下边距（在DIV中的默认CSS为P）。

可以按以下方式进行修复：

在 .table_container 中添加 border-spacing:0，并且对于旧版本的浏览器，添加 cellspacing="0" 作为 TABLE 的属性。
给内容 TD 添加 rowspan="2"，在侧边栏 TD 下方添加一个空的 TD，并通过在 .table_sidebar 中添加 height:1px 强制将侧边栏 TD 的高度设置为最低。
将表格封装在所需高度的 DIV 中。
在 TD 中添加具有明确定义的上下边距的 P 元素（默认情况下，TD 中的 P 的 CSS 显然没有边距）。

<html>
<head>
<style>
.container {
max-width: 960px;
background-color: RED;
height: 200px;}

.table_container {
width: 100%;
background-color: RED;
border-spacing: 0;}

.table_sidebar {
background-color: GREEN;
width: 30%;
height: 1px;}

.table_content {
background-color: YELLOW;
/* width: 70%; still unnecessary */ 
padding : 10px;}

td p {
margin: 1em 0;}
</style>
</head>
<body>
<div class="container">
<table class="table_container" cellspacing="0">
<tr>
<td class="table_sidebar"><p>text in sidebar</p></td>
<td rowspan="2" class="table_content"><p>text in content</p></td>
</tr>
<tr><td></td></tr>
</table>
</div>
</body>
</html>

虽然两种方法都可以产生相同的输出，但TABLE方法不太依赖于尺寸的准确性。

- Uber Kluger

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cypress Frankenfeld · Accepted Answer

为了避免页面宽度超过100%并使.content下移，您可能需要做出一些妥协。我可以想到几个解决方案:

1) 增加`.content`的所有直接子元素的填充

.content > * {
    padding-left:10px;
}

2) 使用百分比填充`.content`

.content {
    padding-left:2%;
    width:68%;
}

3) 改变盒子模型的行为

.content {
     box-sizing:border-box;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;         
}

这三种解决方案都有一些问题。

对于所有的.content直接子元素添加内边距可能会在您想添加其他内边距时出现问题。
使用百分比给.content添加内边距，会在不同大小的窗口上略有不同。
改变盒模型的行为可能会带来麻烦，因为它会改变默认的标准CSS模型到一个并不广泛使用的模型（在这个例子中，我们基本上告诉现代浏览器使用IE的怪异模式盒模型），但这似乎是您情况下最好的解决方案。它基本上没有任何问题，除了IE7不支持，在浏览器市场份额只有大约2%。

如何正确地使用div的padding？

1) 增加.content的所有直接子元素的填充

2) 使用百分比填充.content

3) 改变盒子模型的行为

1) 增加`.content`的所有直接子元素的填充

2) 使用百分比填充`.content`