Gap between content and border when using flex-CodePudding

I have a row of images in a div with a flex display, they are intended to lie plush against a bottom border, instead there is a gap.

<!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>

As you can see the padding of the div is 0, and the border is defined in absolute pixels. So how is this happening, and how might the intended layout be obtained?

CodePudding user response：

Setting the 'box-sizing' of the div to 'border-box' would solve the problem.

<!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>

CodePudding user response：

The html elements have a default style in case of body its

display: block;
margin: 8px;

More info here https://www.w3schools.com/cssref/css_default_values.asp

changing the margin to 0 should work

body {
margin:0px;
}