5

I've been experimenting with display:inline-block on div elements and I'm trying to work out why my two inner div elements are not displaying on the same line. Both divs are set to width of 200px and their parent div is set to 400px.

If I set the inner divs to float left instead of using inner-block it works as expected.

The code snippet is as below:

Note: that I've set box-sizing to border-box. So I assumed this would make both inner divs exactly 200px even with the 1px border.

* {
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0
}
.container {
  width: 400px;
}
.inner {
  border: 1px solid black;
  padding: 10px 0;
  width: 200px;
  display: inline-block;
}
<h1>Why does this display on two lines?</h1>
<div class="container">
  <div class="inner">Testing border box property</div>
  <div class="inner">Second div</div>
</div>

4 Answers 4

5

You could remove the white space between inline-block elements by adding font-size:0px; to parent element (.container) then add font-size (e.g 16px) to child (.inner) elements.

* {
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0
}
.container {
  width: 400px;
  font-size:0px;
}
.inner {
  border: 1px solid black;
  padding: 10px 0;
  width: 200px;
  display: inline-block;
  font-size: 16px;
}
<h1>Why does this display on two lines?</h1>
<div class="container">
  <div class="inner">Testing border box property</div>
  <div class="inner">Second div</div>
</div>

1
  • 1
    Ah the white space! Thanks! Alternatively I can both inner divs on the same line of code without any space between the two elements.
    – neodymium
    Sep 30, 2014 at 1:19
3

You need to remove unnecessary spaces between your HTML tags or reset font-size to 0.

check it here :

Fighting the Space Between Inline Block Elements

There is more solutions on the link above.

Plus you can use display:block; float:left instead.

0

The border. The border will add 2 pixels to each box, so the contents are actually 404 pixels, and it does not fit within the 400 pixels wide div.

5
  • I've set box-sizing to border-box. So shouldn't the width of the width of the inner div should be exactly 200px?
    – neodymium
    Sep 30, 2014 at 1:06
  • I saw that just now. It should. Try adding "float:left;" and "display:block;" instead of "display:inline-block;" - that should work. That adds the need for clearfix though :( Sep 30, 2014 at 1:08
  • You're right, float works, but I really wanted to find out why inner-block doesn't work!
    – neodymium
    Sep 30, 2014 at 1:10
  • I don't know, I'm searching for answers but haven't found anything good yet :( Sep 30, 2014 at 1:11
  • @neodymium check this out - css-tricks.com/fighting-the-space-between-inline-block-elements
    – Anonymous
    Sep 30, 2014 at 1:16
0

There's not enough space in the container div. Change the container div to 404px to account for the left and right sides for each of the inner divs

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.