html中如何让两张图片的间隙消失,关于HTML里图片默认间隙问题

问题描述:

在HTML里图片之间产生的间距，浏览器都会有默认的间距。话不多说，直接上图解释其中的问题。

*{

margin: 0;

padding: 0;

}

div{

width: 400px;

height: 100px;

border: 1px solid pink;

margin: 50px auto;

}

img{

width: 100px;

height: 100px;

}

如图：产生默认边距问题导致出现换行等问题

解决办法：分为三种模块来解决

1.上下间距问题

2.左右间距问题

3.四周间距问题

1. 上下问题:

① 对img 加上 vertical-align：top 或者vertical-align：bottom属性，但此属性只能解决图片产生的上下默认边距问题。如图：

img{

width: 100px;

height: 100px;

vertical-align: top;

}

② 对父元素 div加上line-height：0 ；属性，但此属性只能解决图片产生的上下默认边距问题。如图：

div{

width: 400px;

height: 100px;

border: 1px solid pink;

margin: 50px auto;

line-height: 0;

}

2. 左右问题:

① 最直接的办法，产生左右的默认间距问题是由于代码换行问题识别而产生，可以在img代码后加上注释进行连接。如图：

② 代码不换行(不建议使用！)如图：

③ float来解决，或者将img ，display：block； 但此时则会出现img换行问题又得继续进行float操作！(如div没设置高度，同时还会此时高度塌陷的问题！)

img{

width: 100px;

height: 100px;

float: left;

}

3. 四周问题:

① 在父元素上加上 font-size ： 0；能同时解决四周所产生的边距问题！(但在父元素下同时存在文本的情况下，这需要单独对文本进行 font-size 声明大小！)

div{

width: 400px;

height: 100px;

border: 1px solid pink;

margin: 50px auto;

font-size: 0;

}

② 用float来解决

img{

width: 100px;

height: 100px;

float: left;

}

③ 当然上下+左右方法也能解决。

大致想到了这几种种方法就这样！如果有其他的方法，请不吝赐教，谢谢！