填充不能按预期工作，CSS，HTML

我有一个div宽度为500px，高度为500px的div。最大宽度和最大高度也设置为500px。我试图使div的填充左侧为100px，所以我可以从左侧移动单词“Hello”100px而不增加div的整体宽度。当我将填充左侧设置为100px时，即使将div的最大宽度设置为500px，我的div的整体宽度也增加到600px。有没有办法让我从左边移动100px的单词“Hello”，而不增加div的宽度，或者围绕单词“Hello”缠绕另一个元素？填充不能按预期工作，CSS，HTML

div { 
 
    border: 1px solid red; 
 
    width: 500px; 
 
    height: 500px; 
 
    max-width: 500px; 
 
    max-height: 500px; 
 
    padding-left: 100px; 
 
}

<div> 
 
    Hello 
 
</div>

来源

2015-07-10 frosty

https://css-tricks.com/the-css-box-model/ willhelp you understand the box model –

100px + 400px = 500px。给宽度'400px'。 –

您可以尝试使用box-sizing: border-box，从而迫使声明高度考虑您的填充（S）。

div { 
 
    border: 1px solid red; 
 
    width: 500px; 
 
    height: 500px; 
 
    max-width: 500px; 
 
    max-height: 500px; 
 
    padding-left: 100px; 
 
    box-sizing: border-box; 
 
}

<div> 
 
    Hello 
 
</div>

来源

2015-07-10 18:28:33 Terry

很简单，很好的解释。 ;） – frosty

另外，有没有办法让我从上到下在div中间放置一个边框？ – frosty

@frosty您可以（1）使用绝对定位的伪元素或（2）使用背景渐变技巧。 – Terry

您需要调整您的盒子模型。把它放在你的CSS中：

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
}

Paul Irish explains how the box model works以及为什么我们必须这样定义它。

实质上，当我们使用padding时，它将自身添加到内部宽度/高度的值中。通过调整您的箱子尺寸为border-box，您说如果您的箱子宽度为500px，并且您应用了padding-left: 100px，则它将模拟只有400px的箱子以补偿填充 - 总计为500px。

Browser support is universal在这一点上，它表现良好（尽管使用了*选择，其中有尽可能多的为使用HTML标签，如h1和CSS p的影响）。

更新：请注意，上面的CSS影响所有使用盒模型的元素。每当我更新样式表上的一个盒子模型时，我会将它们全部更新以防止稍后在游戏中忽略此细节，当时我试图保持连续性。

来源

2015-07-10 18:29:09 JLF

当你需要的只是修理一个盒子时，为什么要用'*'来搞砸？ –

不一致的盒子模型是我之前忽略的东西，所以为了避免混淆 - 当我在样式表上更改一个盒子模型时，我将其全部更改。为了解决这个问题，我会调整我的答案。 @SalmanA – JLF

填充不能按预期工作，CSS，HTML

回答

相关问题