-2

I've tried to make a simple block structure to visualize how works "display: inline-block;" property. And I have a question: what's that tiny space between blocks that looks like borders, which I did not set up? Why does it appear?

 h1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5rem;
        margin-top: 0;
        font-weight: 100;
    }
    
    .container {
        background-color: rgba(12, 14, 24, 0.82);
    }
    
    .yellow {
        background-color: rgba(255, 251, 2, 0.82);
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }
    
    .pink {
        background-color: rgba(236, 2, 157, 0.68);
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }
    
    .cyan {
        background-color: cyan;
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }
  <div class="container">
    <div class="yellow">
        <h1>1</h1>
    </div>
    <div class="pink">
        <h1>2</h1>
    </div>
    <div class="cyan">
        <h1>3</h1>
    </div>
  </div>

screenshot

I've tried to ask it in the Discord community but nobody can't give me a correct explanation...

Artur Kasparov
  • 1
  • 4

2 Answers2

0

The question was not so much how to get round the problem but what causes it and on what it depends.

The size of that gap depends on the font-size which is the one current in the container.

Here's a snippet with .container having a font-size of zero - you'll see that the elements are up against each other.

Then try altering that to 100px and you'll see the width gets quite big (though not 100px).

The container in your code doesn't have a font-size specifically defined so it'll pick up the default font-size - quite ofthen that is 16px. The gap is much smaller than that of course, I believe it is to accommmodate the edges of characters, but I may be wrong there and it would be good if someone could comment on that.

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5rem;
  font-size: 2.5rem;
  margin-top: 0;
  font-weight: 100;
}

.container {
  background-color: rgba(12, 14, 24, 0.82);
  font-size: 0;
}

.yellow {
  background-color: rgba(255, 251, 2, 0.82);
  height: 300px;
  width: 10%;
  display: inline-block;
  box-sizing: border-box;
}

.pink {
  background-color: rgba(236, 2, 157, 0.68);
  height: 300px;
  width: 10%;
  display: inline-block;
  box-sizing: border-box;
}

.cyan {
  background-color: cyan;
  height: 300px;
  width: 10%;
  display: inline-block;
  box-sizing: border-box;
}
<div class="container">
  <div class="yellow">
    <h1>1</h1>
  </div>
  <div class="pink">
    <h1>2</h1>
  </div>
  <div class="cyan">
    <h1>3</h1>
  </div>
</div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
-1

It's because of elements take default properties such as display:block; font-size properties use display:flex; property to the main container. or change in font-size it will make changes in gap. I hope it will clear your doubts. Thank you.

body{
  margin:0;
  padding:0;
  box-sizing: border-box;
} 
h1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5rem;
        margin-top: 0;
        font-weight: 100;
    }
    
    .container {
        display:flex;
        background-color: rgba(12, 14, 24, 0.82);
    }
    
    .yellow {
        background-color: rgba(255, 251, 2, 0.82);
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }
    
    .pink {
        background-color: rgba(236, 2, 157, 0.68);
        height: 300px;
        width: 10%;
        display: inline-block;
        
    }
    
    .cyan {
        background-color: cyan;
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }
<div class="container">
    <div class="yellow">
        <h1>1</h1>
    </div>
    <div class="pink">
        <h1>2</h1>
    </div>
    <div class="cyan">
        <h1>3</h1>
    </div>
  </div>
mr.Hritik
  • 577
  • 3
  • 19