CODEWITHSUNDEEP
htmlcss
Yeongchan Jeon
Yeongchan Jeon

Reputation: 519

How can I get rid of space between <div>s?

I want one <div> to be on the top, three for in the middle in a row and one on the bottom without remaining spaces. And I cannot remove the space between the middle <div>s and the bottom one.

enter image description here

The height of the top and the bottom ones is 15%; while the middle ones have 70%. And the bottom one is slightly out of .container.

This is <body> tag.

<div id="wrap">
    <div class="container">
        <div></div><div></div><div></div><div></div><div></div>
    </div>
</div>

And this is css style.

    #wrap{
        width: 90%;
        height: 500px;
        margin: 0 auto;
        border: 4px solid black;}

    .container{
        width: 93.75%;
        height: 492px;
        margin: 0 auto;
        border: 4px solid black;}

    .container div{
        /*display: block;*/
        height: 100%;}

    .container div:first-child{
        height: 15%;
        background: #003153;}

    .container div:first-child +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #c33;}

    .container div:first-child +div +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #2dcc70;}

    .container div:first-child +div +div +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #e75d5d;}

    .container div:first-child +div +div +div +div{
        /*display: block;*/
        height: 15%;
        background: #003153;}

Do I have to deal with this by modifying display: or something?

Upvotes: 2

Views: 60

Answers (2)

Vishal Kumar Sahu
Vishal Kumar Sahu

Reputation: 1416

Here is working code-

      #wrap{
        width: 90%;
        height: 500px;
        margin: 0 auto;
        border: 4px solid black;}

    .container{
        width: 93.75%;
        height: 492px;
        margin: 0 auto;
        border: 4px solid black;}

    .container div{
      vertical-align: top;
        /*display: block;*/
        height: 100%;}

    .container div:first-child{
        height: 15%;
        background: #003153;}

    .container div:first-child +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #c33;}

    .container div:first-child +div +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #2dcc70;}

    .container div:first-child +div +div +div{
        display: inline-block;
        width: 33.33333333333333333%;
        height: 70%;
        background: #e75d5d;}

    .container div:first-child +div +div +div +div{
        /*display: block;*/
        height: 15%;
        background: #003153;}
<div id="wrap">
    <div class="container">
        <div></div><div></div><div></div><div></div><div></div>
    </div>
</div>

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39392

Use vertical-align: top with display: inline-block. Default value is baseline.

From Documentation:

baseline: Aligns the baseline of the element with the baseline of its parent.

#wrap{
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 4px solid black;}

.container{
  width: 93.75%;
  height: 492px;
  margin: 0 auto;
  border: 4px solid black;}

.container div{
  /*display: block;*/
  height: 100%;}

.container div:first-child{
  height: 15%;
  background: #003153;}

.container div:first-child +div{
  display: inline-block;
  vertical-align: top;
  width: 33.33333333333333333%;
  height: 70%;
  background: #c33;
}

.container div:first-child +div +div{
  display: inline-block;
  vertical-align: top;
  width: 33.33333333333333333%;
  height: 70%;
  background: #2dcc70;}

.container div:first-child +div +div +div{
  display: inline-block;
  vertical-align: top;
  width: 33.33333333333333333%;
  height: 70%;
  background: #e75d5d;}

.container div:first-child +div +div +div +div{
  /*display: block;*/
  height: 15%;
  background: #003153;}
<div id="wrap">
    <div class="container">
        <div></div><div></div><div></div><div></div><div></div>
    </div>
</div>

Upvotes: 4

Related Questions