Gap between content and border when using flex

April 28, 2022

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?

>Solution :

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>