How to remove this space among the pictures?如何刪除圖片之間的這個空間？ CSS
我正在學習創建一個畫廊，但我無法刪除圖片之間的空間，我該怎麼辦？
代碼：
body {
background: #E6E6E6;
}<body class="imagens">
<img src="imagens/imagem1.png">
<img src="imagens/imagem2.png">
<img src="imagens/imagem3.png">
<img src="imagens/imagem4.png">
<img src="imagens/imagem5.png">
</body>最簡單的修補程序將設置以下CSS屬性
雖然我不建議在body元素使用該修復
.container{
background: #E6E6E6;
font-size:0px;
}
問題原因：來源：here
因爲白色空間是內聯元素顯著。如果你想讓它們排列起來，你總是可以漂浮你的圖片。
由於圖像之間存在一個輸入，所以出現這個問題！
.container {
background: #E6E6E6;
font-size: 0px;
}<body class="imagens">
<div class="container">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
</div>
</body>圖像之間的空間是由於在源代碼中的<img>元件之間的空格。默認情況下，<img>元素的CSS display屬性設置爲inline，並且在常規文本中充當表情符號（如果您在它們之間留出空間，它們之間將留有空間;如果您不在它們之間留下空間，他們之間沒有任何空間）。
所以HTML的方法來解決這個問題是除去元素之間的所有空格字符：
<body class="imagens">
<img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150">
</body>
一個CSS的辦法可能是沿着這些線路適用的東西：
.imagens {
overflow: hidden;
}
.imagens img {
float: left;
}
你可以使用float。
.clearfix::after, .container::after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.images img {
float: left;
}<div class="images clearfix">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
</div>您可以使用float: left，使他們display: block。不需要爲別的......
img {
display: block;
float: left;
}<div>
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
</div>可以使用HTML註釋用一個小黑客爲間隔的元素之間：
<img src="imagens/imagem1.png"><!--
--><img src="imagens/imagem2.png"><!--
--><img src="imagens/imagem3.png"><!--
--><img src="imagens/imagem4.png"><!--
--><img src="imagens/imagem5.png">
@Marco這是否回答對您有幫助？ –