Question 43835 in Html Question posted in
Some basic documentation can be found here.

What is the tiny space between blocks? – Html

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…

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search