Question

我正在进行一项练习，我在其中创建了一张4x3的照片网格。我通过删除HTML中的间距删除了行内照片之间的差距，但我似乎无法删除行之间的间隙。有什么帮助吗？

https://codepen.io/benrichi/pen/MJgOze?editors=1100

HTML

<section id="section_photography">
    <h1>Photography</h1>
    <img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image">
</section>

CSS

#section_photography {
    width: 100vw;
    padding-top: 50px;
    background-color: aqua;
    clear: both;
    position: relative;
}

#section_photography h1 {
    text-align: center;
}

.photography_image {
    width: 25vw;
    margin: none;
    padding: none;
}

Answer 1

使用vertical align：

.photography_image {
    width: 25vw;
    margin: none;
    padding: none;
    vertical-align: bottom;
}

<强>说明：图像通过内联属性（默认）放置在基线上，因此它们下面的空间是为字体下降（g，j，p，q和y）保留的空间。 vertical-align: bottom让他们坐在行框的底部。

如何摆脱这些行之间的差距？

1 个答案: