margin设置为什么会宿小图片？float后其他div的文字内容怎么变位置了？

开始是这样

我给产品那个div设置：margin：20px后，如下，它上下扩展了20px,而左右却是自己缩小了20px,为什么会缩小

我给产品那个div float后，下面的div也跟着上来了，如下，只是后面div文字内容本来是一个居左一个居中的，为何都跑到可见部分的左和中去了？

body设置了宽度，然后产品是在body里的，产品宽度就是body宽度减去左右padding和border，设置了margin后，产品宽度自然就要变为body宽度减去左右padding和border和margin了。

1. Margin: 20px是上下左右都有20的margin， 只要上下的话，可以用 margin-top:20px; margin-bottom: 20px; 或者 margin: 20px 0px 20px 0px 顺序是 top right bottom left. 参考: http://www.w3schools.com/css/css_margin.asp

没法编辑啊，试一试重新格式化一下:

Margin: 20px是上下左右都有20的margin， 只要上下的话，

可以用 margin-top:20px; margin-bottom: 20px;

或者 margin: 20px 0px 20px 0px 顺序是 top right bottom left.
参考: w3schools