CSS: Why doesn't this inline div block appear on one line?
I've been experimenting with display:inline-block
in divs and I'm trying to figure out why my two inner divs aren't showing on the same line. Both divs are set to 200px wide and their parent div is set to 400px.
If I set the inner divs to float left instead of using it inner-block
, it works as expected.
The code snippet looks like this:
Note. I have set the size of the window to a frame. So I assumed this would make both inner divs exactly 200px even with a 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>
source to share
You can remove the white space between elements inline-block
by adding font-size:0px;
to the parent element ( .container
) and then add font-size
(for example 16px) to the children ( .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>
source to share
You need to remove unnecessary spaces between your HTML tags, or reset the font-size to 0.
check here:
Fighting the space between inline block elements
There are more solutions in the above link.
Plus you can use display: block; float: left.
source to share