添加填充或边距浮动

Ger*_*via 3 html css css-float

我试图像 bootstrap 一样创建 CSS 网格col。我想从左侧和右侧添加 15px 的填充。但是当我添加属性时,它会打破浮动(使其不能并排站立)。

这是示例:https : //jsfiddle.net/t29q1gcL/

为什么不起作用?

.grid-4{
  float: left;
  width: 40%;
  background: red;
  padding: 0 15px;
}

.grid-6{
  float: left;
  width: 60%;
  background: blue;
  padding: 0 15px;
}
Run Code Online (Sandbox Code Playgroud)

Jis*_*V S 5

将此添加到您的 css,参考链接http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

* {
   box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -moz-box-sizing:border-box;
}
Run Code Online (Sandbox Code Playgroud)

检查工作小提琴https://jsfiddle.net/d8mrdz7x/

  • 始终是 MDN 网络(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)而不是 w3schools!:) (3认同)