首页 文章

Box-Sizing似乎没有像我期望的那样尊重填充

提问于
浏览 次
0

有人可以告诉我为什么盒子大小似乎不尊重div中的填充给定以下fiddle example

// The code is too long for this but can be viewed using browser debugging tools
// and here is a picture that says it all.

enter image description here

左栏固定宽度：190px;

右栏是宽度：100％，左边距：190px

绿色div是一个没有宽度和高度的嵌套div：20px;

<style>
  div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
 </style>

衬垫是否应该将绿线推入左侧？

css layout

2 回答

  • 1

    这个例子中的问题是 #wizard-body div，它有一个左边距但是宽度为 100% ，这意味着它可以为它的容器加宽 . 漂浮物也会让事情变得混乱 . 删除这些，它将按预期工作：

    #wizard-body {
    float: left;
    width: 100%;
}

    绿色div的行为符合预期，但是在容器关闭屏幕之后 .

    回复于
  • 1

    box-sizing:border-box 不会删除填充 . 它只是在计算div的宽度时不考虑它 .

    div {width:400px; padding:10px;} 将给出宽度为420px的div，因为宽度还包括填充 .

    但

    div {width:400px; padding:10px; box-sizing:border-box;} 将给出宽度为400px的div，因为它不包括填充 .

    但在这两种情况下，填充仍然存在 .

    回复于

相关问题