test元素是个div,宽高100,div后一个兄弟元素为span,如何让div和span上下间距10px?
- 为div设置一个margin-bottom 10px
- 为div设置一个padding-bottom 10px
这两中方式都可以让div和span上下间距10px。那么这两种方式有什么区别?
如果设置的值margin-bottom,那么相当于是给div这个盒模型外部设置的边距,那么此时盒模型内部的宽高是100*100,那么此时给div设置背景的话是只有100个像素的,margin不属于盒模型内部了,此时给div加click事件,margin区域也是无效的。
<style>
.box2{
width: 100px;
height: 100px;
background-color: grey;
margin-bottom: 10px;
}
</style>
<body>
<div class="box1">
<div class="box2" onclick="myclick()">test</div>
<span>span</span>
</div>
<script>
function myclick(){
alert(111)
}
</script>
</body>
此时点击红色区域是无法触发点击事件的。
但是如果给div设置padding-bottom 10px,那么此时是给元素盒模型内部设置的,此时的背景和点击事件是有效的,也就是div的盒模型此时是110px
.box2{
width: 100px;
height: 100px;
background-color: grey;
padding-bottom: 10px;
}
所以margin和padding还是有一些差距的,具体使用哪个需要结合场景。