关于CSS属性margin设置负值的作用

关于margin设置负值的作用

在进行类似商城网站的布局时，经常会出现需要布局多个小模块且每个小模块都要有边框border的情况。这时在使用浮动float进行布局时可能会出现父元素宽度不够和小模块高度不对齐的问题。

解决方法

• 找到具体的小模块元素，添加类来修改宽高和去除多余的margin。（复杂）
• 通过伪类选择器定位到具体小模块元素统一进行修改。（受浏览器兼容的影响）
• 通过设置margin负值解决。（合适）

具体问题

在进行考拉海购的这类布局时：

• 父元素宽度设置为1100px，每个小模块的宽度设置为219px。加上每个小模块的边框最终宽度之和超出父元素的1100px，无法达到布局效（(219+2)*5>1100）。
• 父元素的高度设置为355px，最左边小模块的高度为353px，其余小模块的高度均为176px。其余小模块的高度加上边框后无法与最左边小模块高度对齐，无法达到布局效果（(176+2)*2>353+2）。
  
  

具体实现

不设置margin负值时代码：

未设置margin负值时界面（未实现需要的布局效果）：
通过设置margin负值解决布局问题代码：

设置margin负值时界面（实现需要的布局效果）：