Hi, I’m in the challenge of creating my WebSite Style Guide and I have one question. Why are there spaces between my color blocks? I didn’t put any margin for the Divs elements which are creating the blocks.
Here an image, notice the space between the colors, looks like there is a margin-bottom and margin-left/right.
Maybe is the “diplay: inline-block;” line, but if that, how can I avoid that?
Here is part of my code in HTML:
<header>My WebSite Style Guide</header>
<main>
<section class="color">
<div class="firstDiv">
<div class="one">Dark Blue <br> #01578C</div>
<div class="two">Soft Blue <br> #29D8DB</div>
<div class="three">Green <br> greenyellow</div>
</div>
</section>
This is all my code in CSS:
*{
margin: 0;
padding: 0;
}
*{
box-sizing: border-box;
}
header{
margin: 10px 100px;
}
/* ------------------------------------------------------color------------------------------------------------------------- */
.color{
border: 5px solid gray;
margin: 10px 100px;
}
.firstDiv .one{
display: inline-block;
border: 10px solid #01578C;
background-color: #01578C;
border-radius: 5%;
}
.firstDiv .two{
display: inline-block;
border: 10px solid #29D8DB;
background-color: #29D8DB;
border-radius: 5%;
}
.firstDiv .three{
display: inline-block;
border: 10px solid greenyellow;
background-color: greenyellow;
border-radius: 5%;
}