Home / Questions / 395322
Accepted
Fernando Iam
Asked: 2020-10-08 11:41:30 +0800 CST 2020-10-08 11:41:30 +0800 CST

Remove space between top and bottom div

  • 772

I want the two divs to be in the same position, but stuck to each other, which makes the hole for me, and I don't understand why it does it or how to remove it

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        header {
            height: 4em;
            width: 100%;
            border: 3px solid #ccc;
        }

        main {
            margin: 1px;
            height: 25em;
            width: 100%;
            border: 3px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: flex-start
        }

        article {
            height: 23em;
            width: 22em;
            border: 3px solid black;
            margin-left: 5px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
           

        }

        .container-img {
            height: 15em;
            margin: 2px;
            width: 18em;
            border: 3px solid black;
            
        }

        .container-title {
            height: 5em;
            width: 18em;
            border: 3px solid black;
        }
    </style>
</head>

<body>
    <header></header>
    <main>
        <article>
            <div class="container-img"></div>
            <div class="container-title"></div>
        </article>
    </main>
</body>

</html>
html

1 Answers

  1. Best Answer

    You can do the following:

    • Instead of using flex-wrapto move the second divto the next line, you can implement the use of flex-directionwith a value ofcolumn
    • The above will help us that the elements are stacked one on top of the other
    • To the parent container you give a paddingto separate the 2 divfrom its edge
    • divWe give the second a defined width ( which, even when you put real content on it, will not be necessary ) and we achieve the desired appearance

    Code:

        <style>
      article {
        border: 1px solid;
        display: flex;
        flex-direction: column;
        padding: 25px;
        width: 400px;
      }
      
      .container-img,
      .container-title{
        border: 1px solid crimson;
        text-align: center;
      }
      .container-title {
        height: 100px;
      }
    </style>
    
    <article>
      <div class="container-img">1</div>
      <div class="container-title">2</div>
    </article>

    Reference

    • 2