img{display:block;}与Img图片默认的3px空白缝隙解决方法以及display相关问题

img{display:block;}与Img图片默认的3px空白缝隙解决方法以及display相关问题

1、为什么经常见img{display:block;}这种设置？

• img{display:block;} 表示将img标签，即图片标签由行内元素变成一个块级元素。
• 一般在制作轮播网页或使用到img图片时，我们都会对图片设置img{display:bolck}。因为img图片下方会有一个3px的白色空隙产生，这样设置之后可以把img变为块级元素从而来消除这段空隙。

2、Img图片默认的3px空白缝隙解决方法

• 变为块级元素，设置img{display:block;}
• 通过设置垂直对齐方式来消，即vertical-align:top|bottom|text-top|text-bottom

3、Display常见值问题

具体内容请看w3school官网的介绍

关于元素框的类型：

• Display:block; 此元素会被显示为块级元素，元素前后会带有换行符
• Display: inline; 默认值，此元素会被显示为内联元素，元素前后没有换行符。
• Display:inherit; 规定应该从父元素继承 display 属性的值。

关于显示：

• Display:block;此元素将显示为块级元素，此元素前后会带有换行符。两点：显示；块级
• Display:none; 此元素不会被显示，隐藏且不占位置
• visibility:visible;让该元素显示
• visibility:hidden;让该元素不显示，但会占位置