如何防止 CSS 中的 padding 属性改变宽度或高度？

发布于 2024-07-17 23:19:09 字数 560 浏览 6 评论 0原文

我正在使用 DIV 创建一个网站。一切都很顺利，除了我创建 DIV 时。我像这样创建它们（示例）：

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

当我添加 padding-left 属性时，DIV 的宽度更改为 220px，我希望它保持在 200px。

假设我创建了另一个名为 anotherdiv 的 DIV ，与 newdiv 完全相同，并将其放在 newdiv 内部，但是 < code>newdiv 没有内边距，而 anotherdiv 有 padding-left: 20px。我得到同样的结果，newdiv 的宽度将为 220px。

我该如何解决这个问题？

原文

I am creating a site with DIVs. Everything's working out except when I create a DIV. I create them like this (example):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

When I add the padding-left property, the width of the DIV changes to 220px, and I want it to remain at 200px.

Let's say I create another DIV named anotherdiv exactly the same as newdiv, and put it inside of newdiv but newdiv has no padding and anotherdiv has padding-left: 20px. I get the same thing, newdiv's width will be 220px.

How can I fix this problem?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拥抱影子 2024-07-24 23:19:09

添加属性：

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

注意：这在低于版本 8 的 Internet Explorer 中不起作用。

Add property:

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

Note: This won't work in Internet Explorer below version 8.

回复收藏 0 原文

倾城月光淡如水﹏ 2024-07-24 23:19:09

在 newdiv 中放置一个带有 width: auto 和 margin-left: 20px 的 div

从 newdiv 中删除填充。

W3 Box 模型页面有很好的信息。

回复收藏 0 原文

_失温 2024-07-24 23:19:09

尝试这个

box-sizing: border-box;

Try this

box-sizing: border-box;

回复收藏 0 原文

叶落知秋 2024-07-24 23:19:09

如果您想缩进 div 内的文本而不更改 div 的大小，请使用 CSS text-indent 而不是 padding-left。

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}

<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>

If you would like to indent text within a div without changing the size of the div use the CSS text-indent instead of padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}

<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>

回复收藏 0 原文

呆橘 2024-07-24 23:19:09

上面的很多答案都是正确的，但几乎没有提供任何解释，所以我决定为任何可能需要它的人添加这个。

默认情况下，每个元素 box-sizing 参数都设置为 content-box。
这意味着，如果将元素宽度设置为 200 像素，然后在水平两端添加 20 像素的填充，则该元素的总宽度将为 240 像素。

要解决此问题，您只需更新 box-sizing 参数并将其设置为 css 中的 border-box 即可。或者，您可以通过简单地添加以下内容来对所有元素执行此操作。

* {
     box-sizing: border-box 
  }

这告诉浏览器考虑您为元素的宽度和高度指定的值中的任何边框和填充。

因此，对于设置为 border-box 且宽度为 200px、两侧填充为 20px 的元素，其总宽度仍将保持 200px（160px 作为内容框，40px 作为填充）。

希望有帮助。您阅读了有关 css box-sizing 的更多内容

A lot of the answers above are correct, but provided little explanation, so i decided to add this for anyone that might need it.

By default, every element box-sizing parameter is set to content-box.
Which means, that if you set an element width to 200px and then add a padding of 20px on both horizontal end, this would result to a total width of 240px for that element.

to fix this, you simply need to update the box-sizing parameter and set this to border-box in your css. Or you can do this for all elements by simply adding the following.

* {
     box-sizing: border-box 
  }

This tells the browser to account for any border and padding in the values you specify for an element's width and height.

So for an element set to border-box with a width of 200px, and a padding of 20px on both sides, it's total width would still remain 200px (160px as content box and 40px as padding).

Hope that helps. You read more on css box-sizing

回复收藏 0 原文