一,问题复现
<div>
<div class="测试盒子">
<!-- <img src="1.png" data-id="1" class="img" alt=""> -->
</div>
<div class="测试盒子" data-id="2">
<!-- <img src="1.png" data-id="1" class="img" alt=""> -->
</div>
<div class="测试盒子" data-id="3">
<!-- <img src="1.png" data-id="1" class="img" alt=""> -->
</div>
<div class="测试盒子" data-id="4">
<!-- <img src="1.png" data-id="1" class="img" alt=""> -->
</div>
<div class="测试盒子" data-id="5">
<!-- <img src="1.png" data-id="1" class="img" alt=""> -->
</div>
</div>
其中先将img标签注释,用来展示div框架
<script>
var divs = document.querySelectorAll('.测试盒子');
for(div in divs){
divs[div].onclick = function(){
console.log(this.dataset.id);
}
}
</script>
注册一个点击事件,点击盒子时输出data-id
<style>
.测试盒子{
width: 50px;
height: 100px;
border: 2px solid black; /* 注释此条以隐藏div
float: left;
}
/* .img{
width: 100px;
height: 100px;
padding-left: 100px ; 此处为问题所在
} */
</style>
整体定义完毕,先看一下框架的效果
没什么问题,把注释的放开,隐藏掉div
页面的显示效果中,图像被完全展示出来,两端有间隔,确实是我们想要的显示效果
注:实例视频见文章顶部
但是当我们点击的时候会发现,点击第一个图片控制台输出的是2,点击最后两张图片是,输出都为5
二,问题解析
由于图片大小小于或正好等于padding,且padding为每个图片都携带的属性,且再被点击时padding也计算在点击体积内,当我们给div添加上border后可以发现
示例图
点击的有效范围中,第一个格子为空白,二图片在第二个格子内
原理
padding所隔开的区域会算在有效点击体积内,与其相对的margin所隔开的区域不会算在有效点击体积内
三,解决问题
将padding改为margin