CSS inline block white space

Question

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>

score 2 · Answer 1 · answered Aug 10 '17 at 07:21

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>

Yeah I forgot to add box-sizing – stackjlei Aug 10 '17 at 07:22 — stackjlei, Aug 10 '17 at 07:22

score 1 · Accepted Answer · edited Aug 10 '17 at 07:05

1

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>

edited Aug 10 '17 at 07:05

Carl Binalla

5,393
5
27
46

answered Aug 10 '17 at 07:03

kyun

9,710
9
31
66

I know I can do it with flexbox but I want to understand why inline-block isn't working – stackjlei Aug 10 '17 at 07:06
I know one way to solve your problem. If you set *{font-size: 0pt}, you can't see white space between inline-block. but I think it's not good way to solve. – kyun Aug 10 '17 at 07:08
1

@stackjlei Do you want like this? https://codepen.io/anon/pen/mMmNaE – kyun Aug 10 '17 at 07:11
thanks @YoungKyunJin – stackjlei Aug 10 '17 at 07:21
@stackjlei, 'inline-block' _is_ working, exactly as it was supposed to. It places the elements in the run of text, so whitespace characters between them are treated exactly as white spaces between words in the text. If it's not what you want, you probably don't need inline-block. In the past, web devs had to resort to inline-blocks for layout because there were almost no other option, but currently we have proper tools that don't have to rely on hacks for that. – Ilya Streltsyn Aug 10 '17 at 07:22

score 0 · Answer 3 · answered Aug 10 '17 at 07:04

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>

I know I can do it with flexbox but I want to understand why inline-block isn't working — stackjlei, Aug 10 '17 at 07:06
Here you find a full explanation with different solutions for your problem https://stackoverflow.com/questions/32801095/inline-block-boxes-not-fitting-in-their-container — Gerard, Aug 10 '17 at 07:17

CSS inline block white space

3 Answers3