<style type="text/css">
img{
width: 100px;
border: 1px solid #000;
}
</style>
<body>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
就是这样写时 图片之间会有空格
本质上还是 行内元素或者行内块级元素 只要时 换行或者空格 都会有文本分隔符
正规的公司 Html 都是会压缩的
最好的方式
<style type="text/css">
img{
width: 100px;
border: 1px solid #000;
}
</style>
<body>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt=""><img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt=""><img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt=""><img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
有父级容器还可以这样强制改
<style type="text/css">
div{
font-size: 0px;
}
img{
width: 100px;
border: 1px solid #000;
}
</style>
<body>
<div>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</div>
</body>
这种不讨好。
<style type="text/css">
img{
width: 100px;
border: 1px solid #000;
margin-left: -6px;
}
</style>
<body>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
除了这个以外 还有比较典型的案例
<style type="text/css">
</style>
<body>
<textarea cols="30" rows="10">
</textarea>
</body>
因为他的内容是在标签之间写的 有空格或者换行 就会有文本分隔符 然后文本输入框里的光标位置就不会是在开头
