如何去除图片下方边距？Flexbox等高布局相关疑问

1. Flexbox 等高问题 #

默认情况下，Flex容器的align-items属性值为stretch，这会强制所有flex子项拉伸至与容器内最高子项的高度一致，所以左侧容器高度增加时右侧会同步等高。

如果不需要等高布局，只需修改.flexline的CSS：

.flexline{
    display: flex;
    align-items: flex-start; /* 让子项高度自适应自身内容 */
}

2. 图片下方边距去除 #

图片默认是行内元素，会受行高特性影响产生底部间隙，这也是你设置.right高度无效的原因之一。以下是几种简单的解决方法：

方法一：将图片设为块级元素 #

直接给图片添加块级显示属性：

.right img {
    display: block;
    width: 100%;
}

方法二：设置垂直对齐方式 #

通过垂直对齐消除行高带来的间隙：

.right img {
    vertical-align: bottom;
    width: 100%;
}

方法三：调整父元素行高 #

给图片的直接父容器设置行高为0（注意需单独恢复文本的行高）：

.right .type1 {
    line-height: 0;
}
.right .type1 span {
    display: block;
    line-height: 1.5; /* 恢复文本正常行高 */
    margin-bottom: 10px; /* 可选：给文本和图片之间添加间距 */
}

对应HTML需将文本包裹进span：

<div class="type1">
    <span>screenshot</span>
    <a href="./ss/image.png" target="_blank" >
        <img src="./ss/image.png" width="100%">
    </a>
</div>

内容的提问来源于stack exchange，提问作者yushi