Posted on | by liu
CSS 图片与边框无边距
在网站开发中，大家经常需要给图片添加边框。通过 CSS 可以非常简单地完成这个任务，不过大家可能会发现在有些情况下，图片与边框之间会有一些不需要的空隙。这时候，大家可以使用 CSS 的一些技巧来解决这个问题。
1. 去除图片的内部边距
在默认情况下，图片具有一些内部边距（padding），这会导致与边框之间产生一定的距离。可以通过设置图片的 padding 为 0 来解决这个问题。
img {
padding: 0;
}2. 使用 box-sizing 属性
大家可以使用 box-sizing 属性来控制元素的盒模型。将其设置为 border-box 可以让元素的宽度与边框一起计算，从而消除空隙。
img {
box-sizing: border-box;
padding: 0;
}3. 使用 display:block
默认情况下，img 元素是一个 inline 元素。而 inline 元素中，存在一些缩进和空格的问题，会导致其与边框之间产生一定的距离。可以将其转换为 block 元素来解决这个问题。
img {
display: block;
box-sizing: border-box;
padding: 0;
}4. 边框的宽度
最后一个问题可能出在大家边框的宽度上。在有些浏览器中，边框的宽度会给大家带来意想不到的问题。大家可以通过设置边框的宽度为 0 ，然后再重新设置一个宽度来解决这个问题。
img {
display: block;
box-sizing: border-box;
padding: 0;
border: 0;
border: 2px solid black;
}总结
在进行网站开发时，图片与边框之间产生的距离有时可能会给大家带来一些麻烦。但通过简单的 CSS 技巧，大家可以轻松地解决这个问题。让大家的网站更加美观和完美！