css/html-如何去掉网页中图片之间的空隙/html中标签如何归类

首先了解html中标签如何归类：

行级元素/内联元素/inline：

featurn（特点，特征）: 内容决定元素所站位置，不可以通过css改变宽高；
所含标签：

span：表示一行中一小段内容；
strong：加粗，强调一句话非常重要；
em：变斜体，语气中的强调词；
a：链接标签；
del：包含的内容被化中划线；

块级元素/block：

featurn: 独占一行，可以通过css改变宽高；
所含标签：

div：表示一块内容；
p：段落；
ul：无序列表；
ol：有序列表；
li ：上面两个列表的子列表；
form：表单标签；
address ：地址；

行级块元素/inline-block：

featurn: 内容决定大小，可以改宽高；
所含标签：

img：图片标签；

注意：

会显示以上特性，是因为上面标签都有一个隐式的属性：display ；他有三种值正好对应相关标签：
display: inline（行元素）/block（块元素）/inline-block(行级块元素) ; 如果要改变标签这一特性，可以在css中显示定义display;

去掉网页中图片间隔：

图片之间有空格的原因：凡是带有inline的元素/标签，都有文字特性（文字之间总有空隙）；几个img在一块，中间总有空隙；因为img是inline-block;

方式一：将需要去除空隙的图片放在一行，但是如果文件出现压缩（会去除空格）所以会导致这种去除方法会出现错误；
html 代码展示：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> 去除网页中图片之间的空隙</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    
     <img src="c.jpg"></img><img src="c.jpg"></img><img src="c.jpg"></img><img src="c.jpg"></img>

</body>

图片展示：
方式二：通过css样式：margin-left 表示元素左边的空隙，如果变成负数，那么图片之间会嵌入进去，从而达到去掉空隙的目的；
html代码：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> 去除网页中图片之间的空隙</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>

     <img src="c.jpg"></img>
     <img src="c.jpg"></img>
     <img src="c.jpg"></img>
     <img src="c.jpg"></img>

</body>
</html>

css代码：


img{
    margin-left: -6px; /*负像素需要调整测试，并不是只要是负的就会没有空隙*/
}

css/html-如何去掉网页中图片之间的空隙/html中标签如何归类

首先了解html中标签如何归类：

行级元素/内联元素/inline：

块级元素/block：

行级块元素/inline-block：

注意：

去掉网页中图片间隔：

图片之间有空格的原因：凡是带有inline的元素/标签，都有文字特性（文字之间总有空隙）；几个img在一块，中间总有空隙；因为img是inline-block;

猜你喜欢