html div margin left,CSS 布局简明教程－增加 margin 并解决 margin-left 兼容性问题

前面分了两列，但列与列之间没有间距，看起来不美观，想有点间距。.mainCol{float:left;display:inline;margin-left:10px;width:600px;background-color:#00f;color:#000;}

我们想在 sideCol 与 mainCol 之间增加点间距，可以设置 sideCol 的右边距，也可以设置 mainCol 的左边距，我们这里设置 mainCol 的左边距。由于 mainCol 出让了 10px 的左边距，所以 width 要减去 10px，得 600px。

细心的朋友会发现，mainCol 还多了个 CSS 属性，就是 display:inline。这是为了解决 IE 中的错误边距问题解决的，IE 中采用一种错误的计算方式来显示左边距，造成实际的左边距多于指定的左边距，要解决这个可以指定 display:inline。请参见 IE 浮动边界 BUG 延伸探讨(不仅是双倍边距 margin-left)。有人说这不是让 div 和 img、span 这些标签一个级别了么？不怕，div 还 float 了的，float 了的 div display 会变成 block。

运行一下示例

CSS 布局简明教程

.wrapper{margin:auto;width:960px;background-color:#f00;color:#000;}

.sideCol{float:left;width:350px;background-color:#0f0;color:#000;}

.mainCol{float:left;display:inline;margin-left:10px;width:600px;background-color:#00f;color:#000;}

侧边栏

主要栏