最近在做一个小游戏时发现了一个问题，总是在弹出img时先出现一个灰色的边框，所以为了查找问题，查找了一些关于img 默认边框的小知识点。
在这里整理了一些知识点：
一. 下面代码都试验过后会发现，img会有外边框，这个也是使用img元素的一个坑
一般在img为空时出现，因为浏览器找不到图，就会用一个边框来代替
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>img外边框</title> </head> <body> <p class="container-img"> <img class="common-icon login-icon" src=""> </p> </body> <style type="text/css"> .container-img { display: inline-block; width: 36px; height: 36px; overflow: hidden; } .common-icon { display: inline-block; width: 36px; height: 36px; } </style>
为了解决这个问题，整理了几个方法：
1. 设置空img的css样式
img[src=""],img:not([src]){ opacity:0; }
第一个为属性选择器（img中src为空的元素），第二个为反选伪类选择器（src没有的img元素），将其的opacity设置为空
2.img剪裁方法
（1）负margin
.container-img img { display: inline-block; margin: -1px; width: 38px; height: 38px; }
负的边距像能减小元素在文档流中的尺寸一样，但其实它的尺寸大小并没变，只是文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，所以位置也就发生变化了。还有，文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。所以margin = -1px相当于向左上方移动一个像素，所以margin = -1px相当于向左上方移动一个像素，为了让父级元素可以遮住img的边框，需要将img width/height 均加2px，相当与对图片进行剪裁，定位元素方法与这个原理一样。
负margin的使用场景很多，我们很多用的三栏布局的圣杯布局，双飞翼布局都是这么使用的。
（2）绝对定位
.container-img{ position:relative; } .container-img img { position: absolute; top: -1px; right: -1px; width: 38px; height: 38px; }
-------------------
作者：chancejl
来源：CSDN
原文：https://blog.csdn.net/qq_39833794/article/details/79922355
版权声明：本文为博主文章，转载请附上博文链接！