HTML怎样用float设置边框上间距,html – 流体CSS布局和边框

见

this article.

基本上,在“传统”CSS框模型中,框元素的宽度仅指定框的内容的宽度,不包括其边框(和填充).

在CSS3中,您可以切换到另一个框模型,如下所示：

box-sizing: border-box;

浏览器的具体实现是：

-moz-box-sizing: border-box; // for Mozilla

-webkit-box-sizing: border-box; // for WebKit

-ms-box-sizing: border-box; // for IE8

这将导致框尺寸包含元素的边框和填充.所以你现在可以指定

.box {

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-ms-box-sizing: border-box;

width:20%;

border:1px solid red;

float:left

}

并有五个div占用所有的宽度的包含元素,而不包裹.

请注意,旧版浏览器不支持此功能.对于这些,您必须按照此页面上的其他响应将每个框包装到第二个框中.