【问题标题】:Why does CSS padding increase size of element?为什么 CSS padding 会增加元素的大小?
【发布时间】:2011-06-13 14:42:39
【问题描述】:

我正在尝试给我的 div 和 textarea 一些填充。当我这样做时,它会增加元素的大小,而不是缩小其中的内容区域。有什么方法可以实现我想要做的吗?

【问题讨论】:

  • 您使用什么浏览器进行测试?
  • * {box-sizing: border-box;} 添加到您的样式表中,大小将按照您的预期进行。 Paul Irish 确认它对所有现代浏览器都是安全的:paulirish.com/2012/box-sizing-border-box-ftw

标签: html css


【解决方案1】:

这取决于浏览器和box model 的实现。您遇到的是正确的行为。

IE 传统上弄错了:http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

【讨论】:

  • “错误”与 W3C 提出的不同,但就更直观/更易于工作而言是正确的。
  • @pbz:你很可能是对的。但是要遵循规范以避免混乱,这正是 IE 造成的。
  • @cherouvim 不,W3C 是 CSS 盒模型混乱的唯一原因。感谢 IE 在这一点上坚持己见,否则我们仍然会被荒谬的 W3C 盒子模型所困。
【解决方案2】:

根据CSS2 specs,box 类型元素的渲染宽度等于其宽度、左/右边框和左/右填充(左/右外边距也起作用)的总和。如果您的框的宽度为“100%”并且还具有边距、边框和内边距,它们将影响(增加)对象占用的宽度。

因此,如果您的 textarea 需要 100% 宽,请为 width、margin-left/right、border-left/right 和 padding-left/right 分配值,使它们的总和等于 100%。


在 CSS3 中,我们有 three box-sizing models。你可以使用border-box模型:

指定的宽度和高度(以及相应的最小/最大属性) 这个元素决定了元素的边框。也就是说,任何 布局和绘制元素上指定的填充或边框 在这个指定的宽度和高度内。内容的宽度和高度 通过减去边框和填充宽度来计算 指定“宽度”和“高度”属性的相应边。

【讨论】:

    【解决方案3】:

    这在 W3C 部分是一团糟,各种浏览器只会通过它们自己的盒子模型版本增加这种复杂性。就个人而言,我没有考虑哪个浏览器或 CSS 设置可以解决问题,我只是将框的内容包装在另一个 DIV 语句中并在该 DIV 上使用边距,而不是使用填充,如下所示:

    <div id="container" style="width: 300px; border: 10px solid red;">
       <div id="content" style="width: 250px; margin: 25px;">
          Some content
       </div>
    </div>
    

    虽然这只适用于固定大小的容器

    【讨论】:

      【解决方案4】:

      您可以将box-sizing:border-box 添加到容器元素,以便能够指定在向元素添加填充和/或边框时不会改变的宽度和高度。

      有关规格,请参阅here (MDN)

      更新(复制评论以回答)

      目前,根据MDN Specs,所有主流浏览器都支持border-box

      某些浏览器当然需要适当的前缀,即-webkit-moz,您可以清楚地看到here

      【讨论】:

      • 目前,所有主流浏览器都支持border-box值,根据MDN Specs——当然有些浏览器需要适当的前缀,即-webkit-moz,你可以清楚地看到here
      • 就是这样!终于找到解决方案了!
      【解决方案5】:

      对于更跨浏览器的解决方案,您可以通过将需要填充的任何标签包装到另一个具有固定宽度的标签中,并赋予它 width:auto 来避免这种行为。这样,如果父级的宽度为 x,并且您向子级添加填充,子级将继承 x 的完整宽度,从而正确应用填充,而无需修改父级宽度或其自身的宽度。

      【讨论】:

        【解决方案6】:

        div默认采用其父容器的宽度,因此为避免浏览器兼容性问题,您可以在指定的div子div /em> 然后将所需的填充添加到 child div

        注意 - 不要为子 div 指定宽度,因为如果添加填充,宽度会增加

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2013-08-05
          • 1970-01-01
          • 1970-01-01
          • 2012-04-08
          • 2021-07-03
          • 2015-07-17
          • 1970-01-01
          相关资源
          最近更新 更多