似乎盒子大小:边框不起作用

时间:2014-03-07 15:01:32

标签: html css css3 border-box

我从未遇到过这个问题,但简而言之,我将边框应用于所有元素的框尺寸:

*, *:before, *:after {

      -webkit-box-sizing: border-box !important;
      -moz-box-sizing: border-box !important;
      -ms-box-sizing: border-box !important;
      box-sizing: border-box !important;
    }

我没有响应列布局,在这种情况下每行3列

<div class="row clearfix">
   <div class="column span-4-12 property">
      <p>..</p>
   </div>

   <!-- more divs here -->
</div>

所有跨越3列的所有跨度都很好,直到我为.property div添加边距,现在通常因为边框,这只会在列之间添加边距并将它们连续3行,但现在由于某种原因,第3列被推我真的不明白为什么,我错过了什么?

这是关于jsFiddle的实例:http://jsfiddle.net/NmrZZ/

2 个答案:

答案 0 :(得分:20)

保证金不是盒子模型的一部分(无论你使用什么样的盒子大小),所以它总是除了你声明的宽度+填充+边框之外。

下面的图片(来自此主题的CSS Tricks文章)说明了标准框模型与box-sizing: border-box之间的区别:

enter image description here

我能给出的最好建议是完全避免网格的边距,并将其与演示文稿分开。这意味着更多的标记,但会节省您的头痛并使事情更容易维护。查看示例的this fork。修改后的CSS:

.span-4-12 {
    width: 33.33%;
    padding-left: 2%;
}

.property {
    background: white;
}

新标记将是:

<div class="column span-4-12">
    <div class="property">
        <p>Some text 1</p>
    </div>
</div>    

答案 1 :(得分:1)

这是一个浮动明显的问题。而不是浮动,你可以使用内联块,因为浮动过时。大多数人现在都使用display:inline-block,因为无需为单独的行编写clear

<强>参见:

*, *:before, *:after {
	margin: 0;
	padding: 0;

	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

body {
    background: grey;
}
}

.row {
	clear: both;
}

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clear {
    zoom:1;
}

.column {
	display: inline-block;
	}

.span-4-12 {
	width: 30%; 
}

.property {
    background: white;
    margin-left: 2%;
}
<div class="row clearfix">
   <div class="column span-4-12 property">
      <p>Some text 1</p>
   </div>
    
    <div class="column span-4-12 property">
      <p>Some text 2</p>
   </div>
    
    <div class="column span-4-12 property">
      <p>Some text 3</p>
   </div>
</div>