我有两个问题:
img {
width: 20%;
border: 1px solid black;
}
.works {
text-align: center;
padding: 10px;
}

<div class="works" id="works">
<div class="img">
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
</div>
<div class="img">
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
</div>
</div>
&#13;
答案 0 :(得分:0)
通过在图片中添加float:left;
,可以消除差距。
然后,通过仅向每行的第一个图像添加左边框,并且仅向第一行图像添加顶部边框,可以使边框更加均匀。
img {
width: 20%;
border: 1px solid black;
border-left: none;
border-top: none;
float: left;
}
#works .img:first-child img {
border-top: 1px solid black;
}
.img img:first-child {
border-left: 1px solid black;
}
&#13;
<div class="works" id="works">
<div class="img">
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
</div>
<div class="img">
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
<img src="http://up.pestools.ir/151810863547341_works1.png" />
</div>
</div>
&#13;
答案 1 :(得分:0)
空间即将到来,因为默认情况下<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
为<img>
个元素,而inline-block
元素会占用空间来对齐。
您可以使用 Flexbox 删除空格......
...要合并边框,您可以使用inline-block
负值。
Stack Snippet
margin
.img {
display: flex;
align-items: baseline;
justify-content: center;
}
img {
width: 20%;
border: 1px solid red;
margin-left: -1px;
margin-top: -1px;
}
.works {
padding: 10px;
}