margin-botttom和top
.cr-container label{font-style:italic;font-size:24px;width:150px;height:30px;line-height:32px;float:left;color:#fff;margin-bottom:50px;}
1，margin-top:350px与margin-bottom:50px是不是应该一样？
2.为什么margin-bottom取多大正值，都没怎么有效果
都在上方
不怎么动；而取负值几个label都叠在一起？
正在回答
以下为个人理解:
1. margin-bottom和margin-top/left/right不一样,只能作用于同级元素:子元素设置margin-bottom后,不能跟父元素产生间距效果.
2.1 margin-top未设置,默认为0, 所以4个浮动的label都在最上方.
2.2 一共有4个浮动的label,属于同级元素,margin-bottom/top/left/right在它们之间都能产生对应的间距效果.但因这四个label是在同一行浮动的,无所谓谁在谁下面,所以margin-bottom设置多大的正值(或负值,但大于某个值)也影响不到彼此;
2.3 而当margin-bottom设置为负值,且等于负(height+border-top+border-bottom+padding-top+padding-bottom),即margin-bottom=-30px时,label1"不再占有纵向空间",label2再向左浮动至最左端,同理label2/label3也"不再占有纵向空间",最终label3/label4也都浮动到最左端.此时这几个label重叠.
2.4 由于浮动同时受父元素的约束,margin-bottom取更小的负值时,这几个label也不再变化.
仅供参考,欢迎指正,谢谢!
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星