クロム - 表示を伴うCSSエフェクトエフェクト：インラインブロック

Question

最新のクロムバージョンに付属しているCSS設定で奇妙な効果があります。

2番目のボックスが最初のボックスの下にある理由はありますか（画像参照）

display: inline-block; 

いくつかのヘルプが歓迎されます。それはおそらくバグです - - 私はバグとしてそれを参照してください、あなたのマークアップではあなたがスペースを持っている場合、それが言うとおりに、それは（ホワイトスペースだけでなく、これらの空間をレンダリングしますんインラインブロックを表示

Answer 1

。ここで

は一例です箱が並んで表示されるように、

フルスクリーンモードで表示してください。コンテナの幅が画面理由により削減したときに親にwidth: 100%;を与えられ、子要素に固定幅を与えられたので、それは以下の来ているとき、唯一の期待通り実際にそのが正常に動作し

.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"> 
 
\t \t \t \t \t \t <i class="ic3a-sep fa fa-cubes"></i> 
 
\t \t \t \t \t \t <div class="value">$4 500</div> 
 
\t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t <i class="ic3a-sep">Icon</i> 
 
\t \t \t \t \t \t <div class="value">Amount</div> 
 
\t \t \t \t \t \t <div class="measure">AmountLabel</div> 
 
      <div class="description"><span class="diff">Amount2</span> Amount2Label</div> 
 
</div> 
 
</div> 
 
</div>

Answer 2

インラインは互いに隣り合っていなければならないので）、例はあなたが表示したものです。両方のボックスの幅とそれらの隣にあるスペースを使用すると、ボックスが分割されます。

この削除するには、いくつかの方法があります：あなたが行うことができます

<div>Element</div><!-- 
--><div>Element 2<div> 

か：

<div>Element</div><div>Element</div> 

が互いの隣のインラインを示すブロックになりますが。これに対抗するもう一つの方法は、負のマージンを使用することです：

.class{ 
    margin-left: -3px; 
} 

に親要素を設定する回避策もあります：

フォントサイズ：0;

又は

空白：NOWRAP。

フレックスボックスを親要素に個人的に使用することをお勧めします。これにより、改行が発生しなくなります。

あなたはここで、この上の詳細を読むことができます：あなたはボックスがあなたがCSSにvertical-align: topプロパティを使用することができますトップに固定したい場合は

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

は意味します、それでもあなたはそれが親要素にwhite-space: nowrap;を与えるだけで欲しいです。

別の方法もあります。display: table;を親要素に、子供の場合display: table-cell;と指定できます。それは私がちょうどic3a-mini-boxクラスからmargin:15pxを削除した

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"> 
 
\t \t \t \t \t \t <i class="ic3a-sep fa fa-cubes"></i> 
 
\t \t \t \t \t \t <div class="value">$4 500</div> 
 
\t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t <i class="ic3a-sep">Icon</i> 
 
\t \t \t \t \t \t <div class="value">Amount</div> 
 
\t \t \t \t \t \t <div class="measure">AmountLabel</div> 
 
      <div class="description"><span class="diff">Amount2</span> Amount2Label</div> 
 
</div> 
 
</div> 
 
</div>

もう降りてくる文句を言いません。 ブラウザをチェックインして、期待通りの結果を得ることができますか？

これが役に立ちます。