为什么css图片之间有间隙?怎么解决?

html-css018

为什么css图片之间有间隙?怎么解决?,第1张

太久没用的东西,偶然用到,竟然忘记了,所以记录一下,加深一下印象

图片和行内块元素默认底线会和父级盒子的基线对齐,因此就会产生白色缝隙。

1.用vertical-align:middle | top| bottom等,让图片不和基线对齐。

上面3中对齐方式都可以

vertical-align不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐。

2.将img通过display: block转为块级元素。

转为块级元素之后,就不存在和父级盒子基线对齐的问题了。

去除css导航条菜单中间有缝隙的方法:

看body加上如下代码就可以了。

body{

margin: 0px

padding: 0px

}

扩展:

body,div, form, img, ul, ol, li, dl, dt, dd, form, p {

margin: 0px

padding: 0px

border: 0px none

list-style: none outside none

text-decoration:none

}

一般网站设计都会加上上面这段代码,学习前端一定要多看其他优秀网站的布局以及页面结构。