使用 flex 时内容和边框之间的间隙

Question

我在 div 的 flex 显示器中有一排图像。它们本应紧靠底部边框，但实际上有一个间隙。

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                height: 100px;
                display: flex;
                align-items: flex-end;
                padding: 0;
                background-color: aquamarine;
                border-bottom: 2px solid hsl(0, 0%, 87%);
            }
            img {
                width: 80px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="https://urnabios.com/wp-content/uploads/2015/04/angel_oak_tree.jpg">
            <img src="https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg">
        </div>
    </body>
</html>

如您所见，div 的填充为 0，边框以绝对像素定义。那么这是如何发生的，以及如何获得预期的布局？

Answer 1

将 div 的 'box-sizing' 设置为 'border-box' 即可解决问题。

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                height: 100px;
                display: flex;
                align-items: flex-end;
                padding: 0;
                background-color: aquamarine;
                border-bottom: 2px solid hsl(0, 0%, 87%);
                box-sizing: border-box;
            }
            img {
                width: 80px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="https://urnabios.com/wp-content/uploads/2015/04/angel_oak_tree.jpg">
            <img src="https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg">
        </div>
    </body>
</html>

Answer 2

html 元素在 body its

的情况下具有默认样式

display: block;
margin: 8px;

这里有更多信息https://www.w3schools.com/cssref/css_default_values.asp

将边距更改为 0 应该可行

body {
margin:0px;
}

使用 flex 时内容和边框之间的间隙

Gap between content and border when using flex

html

css

flexbox