CSS inline block white space [duplicate] - css

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I trie doing different things but can't seem to get rid of the white space between 2 inline-blocks here, thus list is not next to inline-block-div:
.parent {
border: 10px solid red;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
border: 5px solid blue;
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>

Answer 1

The space actually comes from HTML. By default space will be added to inline-block elements. I hope you knew to fight the space's. And another issue in your CSS is you forgot to add box-sizing:border-box property.
Without this property width is calculated as follows
width: 75% + border-left-width + border-right-width. So eventually your width is
75%+10px. Your width will be added more if any padding mentioned. Try this code instead
div{
box-sizing:border-box;
}
.parent {
border: 10px solid red;
width:100%
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
margin-left:-4px;
border:5px solid blue
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>

Answer 2

I recommend to use flex. Flex is very useful to develop.
.parent {
border: 10px solid red;
display: flex;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>

Answer 3

You can make the parent a flexbox to have it fixed
.parent {
border: 10px solid red;
display: flex;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>