Remove blanks that are below the div

Asked

Viewed 49 times

-4

I’m trying to remove the gaps between the Divs but I’m not getting it. I’ve tried using font-size: 0, display: inline-Bock ,float.

html{ 
    background-color: #fff;
    margin: 0;
    padding: 0;
}

h1{
    text-align: center;
    color: #fff;
    width: calc(50vw - 10rem);
    margin: 1.5rem auto;
    font-family: "Poppins", sans-serif;
    background-color: blueviolet;
    padding: 1rem 2rem ;
    font-size: 1.3rem;
    border-radius: 2rem;
}

/* ------------------------------------------------------ */


/*
------------------------------
teste com display-flex
------------------------------
*/

.container{ 
    width: calc(100% - 5rem);
    display: flex;
    margin: 0 auto;
    flex-flow: row wrap;
    align-items: flex-start;
    font-size: 0;
}

.rect{
    margin: 0.5rem;
    flex: auto;
    width: 250px; 
    vertical-align: top;
    border-radius: 1rem;
} 

img, video{
    width: 100%;
    outline: none;
    border-radius: 1rem;
    cursor: pointer;
} 
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlexBox - Grow e Shrink</title>
    <link rel="stylesheet" href="14 - FlexBox - Grow e Shrink Flex.css">
</head>
<body>
    <h1>
        Grid responsivo de testes
    </h1>
    <div class="container">
        <div class="rect r1">
            <a href="img"><img src="https://i.pinimg.com/236x/d2/66/08/d26608c8e000b109fab3fcd84575e49e.jpg" alt=""></a>
            <div class="title-img"><h4>Titulo Imagem</h4></div>
        </div>
        <div class="rect r2">
            <img src="https://i.pinimg.com/236x/61/9d/54/619d54a31dde1116d86d20b2bf4bd679.jpg" alt="">
        </div>
        <div class="rect r3">
            <a href="video1"><img id="v1" src="https://i.pinimg.com/236x/e8/07/32/e80732efd31536e193852dfe96f7e59e.jpg"></img></a>
            <!-- <div class="title-video"><h4>Titulo Video</h4></div> -->
        </div>
        <div class="rect">
            <img src="https://i.pinimg.com/236x/73/c8/1f/73c81f7b1d9f1aec94d25a4aa8b2e857.jpg" alt="">
        </div>
        <div class="rect">
            <img src="https://i.pinimg.com/236x/36/1a/3b/361a3b8d234956f1e8c3b831e9272411.jpg" alt="">
        </div>
        <div class="rect">
            <img id="v2" loop controls  src="https://i.pinimg.com/236x/ea/39/d7/ea39d7fc839dd4e67b87cc88cd00ff64.jpg"></img>
        </div>
        <div class="rect">
            <img src="https://i.pinimg.com/236x/e4/76/1d/e4761df2d9290d00a909d56693026525.jpg" alt="">
        </div>
        <div class="rect">
            <img id='v3' loop controls src="https://i.pinimg.com/236x/e5/02/7e/e5027e8699c0fed18fd30556cd0fe211.jpg"></img>
        </div>
        <div class="rect">
            <img loop controls src="https://i.pinimg.com/236x/24/92/60/249260f39ffd0d40ba21c0a34de0ce08.jpg"></img>
        </div>
        <div class="rect">
            <img id="v4" loop controls src="https://i.pinimg.com/236x/a0/08/96/a00896535553678e793deae69307a2f4.jpg"></img>
        </div>
        <div class="rect">
            <img id="i1" src="https://i.pinimg.com/236x/69/2f/41/692f414b6827f1d87ddb320e87777721.jpg" alt="">
        </div>
        <div class="rect"><img src="https://i.pinimg.com/236x/3d/a2/ed/3da2eda16216514aab723133e972428c.jpg" alt="img1" srcset=""></div>
        <div class="rect"><img src="https://i.pinimg.com/236x/e2/cf/4e/e2cf4e5b1248416d8822e5b1520e74eb.jpg" alt=""></div>
        <div class="rect"><img src="https://i.pinimg.com/236x/69/f4/17/69f417f6c719717dded58d8524878fe5.jpg" alt=""></div>
        <div class="rect"><img src="https://i.pinimg.com/236x/d2/0b/36/d20b362a9cf422dd0e056bf32ddde12c.jpg" alt=""></div>
        <div class="rect"><img src="https://i.pinimg.com/236x/03/b2/bd/03b2bdd5acf67ab6fb4b60eb03ae6925.jpg" alt=""></div>
        <div class="rect"><img src="https://i.pinimg.com/236x/52/68/e9/5268e966d9221dc51a871c41e2b341fc.jpg" alt=""></div>
    </div>
</body>
</html>

html css html5

1 answer

-1

The problem is in the margin you are giving each div, it creates the space between them. I used display: grid and pulled out the margin. Was that the result you wanted? Check below

html {
  background-color: #fff;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  color: #fff;
  width: calc(50vw - 10rem);
  margin: 1.5rem auto;
  font-family: "Poppins", sans-serif;
  background-color: blueviolet;
  padding: 1rem 2rem;
  font-size: 1.3rem;
  border-radius: 2rem;
}


/* ------------------------------------------------------ */


/*
------------------------------
teste com display-flex
------------------------------
*/

.container {
  width: calc(100% - 5rem);
  display: grid;
  grid-template-rows: 1fr;
  flex-flow: row;
  align-items: flex-start;
  font-size: 0;
  justify-content: center;
  align-items: center;
}

.rect {
  width: 250px;
  height:200px;
  vertical-align: top;
  border-radius: 1rem;
}

img,
video {
  width: 300px;
  height:300px;
  outline: none;
  border-radius: 1rem;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FlexBox - Grow e Shrink</title>
  <link rel="stylesheet" href="14 - FlexBox - Grow e Shrink Flex.css">
</head>

<body>
  <h1>
    Grid responsivo de testes
  </h1>
  <div class="container">
    <div class="rect r1">
      <a href="img"><img src="https://i.pinimg.com/236x/d2/66/08/d26608c8e000b109fab3fcd84575e49e.jpg" alt=""></a>
      <div class="title-img">
        <h4>Titulo Imagem</h4>
      </div>
    </div>
    <div class="rect r2">
      <img src="https://i.pinimg.com/236x/61/9d/54/619d54a31dde1116d86d20b2bf4bd679.jpg" alt="">
    </div>
    <div class="rect r3">
      <a href="video1"><img id="v1" src="https://i.pinimg.com/236x/e8/07/32/e80732efd31536e193852dfe96f7e59e.jpg"></img>
      </a>
      <!-- <div class="title-video"><h4>Titulo Video</h4></div> -->
    </div>
    <div class="rect">
      <img src="https://i.pinimg.com/236x/73/c8/1f/73c81f7b1d9f1aec94d25a4aa8b2e857.jpg" alt="">
    </div>
    <div class="rect">
      <img src="https://i.pinimg.com/236x/36/1a/3b/361a3b8d234956f1e8c3b831e9272411.jpg" alt="">
    </div>
    <div class="rect">
      <img id="v2" loop controls src="https://i.pinimg.com/236x/ea/39/d7/ea39d7fc839dd4e67b87cc88cd00ff64.jpg"></img>
    </div>
    <div class="rect">
      <img src="https://i.pinimg.com/236x/e4/76/1d/e4761df2d9290d00a909d56693026525.jpg" alt="">
    </div>
    <div class="rect">
      <img id='v3' loop controls src="https://i.pinimg.com/236x/e5/02/7e/e5027e8699c0fed18fd30556cd0fe211.jpg"></img>
    </div>
    <div class="rect">
      <img loop controls src="https://i.pinimg.com/236x/24/92/60/249260f39ffd0d40ba21c0a34de0ce08.jpg"></img>
    </div>
    <div class="rect">
      <img id="v4" loop controls src="https://i.pinimg.com/236x/a0/08/96/a00896535553678e793deae69307a2f4.jpg"></img>
    </div>
    <div class="rect">
      <img id="i1" src="https://i.pinimg.com/236x/69/2f/41/692f414b6827f1d87ddb320e87777721.jpg" alt="">
    </div>
    <div class="rect"><img src="https://i.pinimg.com/236x/3d/a2/ed/3da2eda16216514aab723133e972428c.jpg" alt="img1" srcset=""></div>
    <div class="rect"><img src="https://i.pinimg.com/236x/e2/cf/4e/e2cf4e5b1248416d8822e5b1520e74eb.jpg" alt=""></div>
    <div class="rect"><img src="https://i.pinimg.com/236x/69/f4/17/69f417f6c719717dded58d8524878fe5.jpg" alt=""></div>
    <div class="rect"><img src="https://i.pinimg.com/236x/d2/0b/36/d20b362a9cf422dd0e056bf32ddde12c.jpg" alt=""></div>
    <div class="rect"><img src="https://i.pinimg.com/236x/03/b2/bd/03b2bdd5acf67ab6fb4b60eb03ae6925.jpg" alt=""></div>
    <div class="rect"><img src="https://i.pinimg.com/236x/52/68/e9/5268e966d9221dc51a871c41e2b341fc.jpg" alt=""></div>
  </div>
</body>

</html>

  • Actually I wanted these Ivs positioned equal to the Pinterest feed, if you can tell me how? if there is any library, framework to help me in this?

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.