Question

我的div宽度为500px，高度为500px。最大宽度和最大高度也设置为500px。我试图让div的填充左边为100px所以我可以移动单词＆＃34;你好＆＃34;从左边100px而不增加div的整体宽度。当我将padding-left设置为100px时，我的div的整体宽度增加到600px，即使我将div的max-width设置为仅500px。有没有办法让我移动这个词＆＃34;你好＆＃34;从左边100px没有增加div的宽度，或者在单词周围包裹另一个元素＆＃34;你好＆＃34;？

＆＃13;

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

＆＃13;

<div>
  Hello
</div>

＆＃13;

Answer 1

您需要调整您的盒子模型。把它放在你的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，并且表现良好（尽管使用了*选择器，其影响与使用h1和{{1}等HTML标记一样多在CSS中。）

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

Answer 2

您可以尝试使用window.onload = function() { document.getElementById('something').innerHTML = 'some html'; };，以强制声明的高度考虑您的填充。

＆＃13;

box-sizing: border-box

＆＃13;

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

＆＃13;

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

2 个答案: