Chrome - CSS effect effect with display:inline-block - html

Question

There is a strange effect with the css setting that has come with the latest chrome version.
Do you've an idea why the second box is below the first one (see image) ?
display: inline-block;
some help is welcomed.

Answer 1

If you want the boxes to anchor to the top you can use the CSS vertical-align: top property.
Here is the example,
Please view it in a full screen mode so that the boxes appear side by side.
.ic3a-container {
width: 100%;
color: white;
}
.ic3a-mini-box-c {
display: inline-block;
width: 500px;
vertical-align:top;
}
.ic3a-mini-box {
height: 100px;
margin: 15px;
padding: 20px;
background-color:#990033;
}
.ic3a-mini-box i {
display: block;
height: 100%;
line-height:100px;
font-size: 60px;
width: 100px;
float: left;
text-align: center;
border-right: 2px solid rgba(255, 255, 255, 0.5);
margin-right: 20px;
padding-right: 20px;
color: white;
}
.ic3a-mini-box .value {
font-size: 2em;
}
.ic3a-mini-box .measure {
font-size: 1.5em;
}
.ic3a-mini-box .description {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ic3a-container">
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep fa fa-cubes"></i>
<div class="value">$4 500</div>
<div class="measure">License</div>
<div class="description"><span class="diff">+23%</span>difference from previous quarter</div>
</div>
</div>
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep">Icon</i>
<div class="value">Amount</div>
<div class="measure">AmountLabel</div>
<div class="description"><span class="diff">Amount2</span> Amount2Label</div>
</div>
</div>
</div>

Answer 2

Actually its working fine as expected only, when it is coming below means when container width reduce by the screen why because you given width: 100%; to the parent and given fixed width to the child elements, still you want that side by side only give white-space: nowrap; to the parent element.
There is an another way too, you can you give display: table; to the parent element and for child's give display: table-cell;. It wont come down anymore

Answer 3

Displaying inline block does exactly as it says, if in your markup you have any spaces it will render these spaces as well (the white space - it is supposedly a bug - i see it as a bug as inline should butt up next to each other), example is what you have displayed. With the width of both of the boxes and the space next to them will result in the boxes breaking down.
There are a few ways to remove this:
<div>Element</div><!--
--><div>Element 2<div>
or you can do:
<div>Element</div><div>Element</div>
Will result in the blocks showing inline next to one another. Another way to combat this is to use a negative margin:
.class{
margin-left: -3px;
}
There is also the workaround of setting the parent element to:
font-size: 0;
or
white-space: nowrap;
I would recommend using flexbox on the parent element personally, as this will stop your line break from happening.
You can read more on this here:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 4

.ic3a-container {
width: 100%;
color: white;
}
.ic3a-mini-box-c {
display: inline-block;
width: 500px;
}
.ic3a-mini-box {
height: 100px;
/* margin: 15px;*/
padding: 20px;
background-color:#990033
}
.ic3a-mini-box i {
display: block;
height: 100%;
line-height:100px;
font-size: 60px;
width: 100px;
float: left;
text-align: center;
border-right: 2px solid rgba(255, 255, 255, 0.5);
margin-right: 20px;
padding-right: 20px;
color: white;
}
.ic3a-mini-box .value {
font-size: 2em;
}
.ic3a-mini-box .measure {
font-size: 1.5em;
}
.ic3a-mini-box .description {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ic3a-container">
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep fa fa-cubes"></i>
<div class="value">$4 500</div>
<div class="measure">License</div>
<div class="description"><span class="diff">+23%</span>difference from previous quarter</div>
</div>
</div>
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep">Icon</i>
<div class="value">Amount</div>
<div class="measure">AmountLabel</div>
<div class="description"><span class="diff">Amount2</span> Amount2Label</div>
</div>
</div>
</div>
I just have removed margin:15px from ic3a-mini-box class.
You can check in browser and see you get the result as expected or not?
Hope this helps.