流体を使用したインラインブロックの表示同じラインをアラインメントしないデザイン

"パーセンテージ"で幅を取る流体ウェブデザインを使用しています。また、マージンとパディングをデフォルトの0pxにリセットしました。どのdivにも境界線はありません。それでも、これらはデフォルトで同じ行に整列していませんか？流体を使用したインラインブロックの表示同じラインをアラインメントしないデザイン

例：

<html> 
 
<head> 
 
<style> 
 
*{margin:0px;padding:0px;} 
 
div{display:inline-block;} 
 
.divOne{background:yellow;width:20%;} 
 
.divTwo{background:green;width:60%;} 
 
.divThree{background:red;width:20%;} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="divOne">One</div> 
 
<div class="divTwo">Two</div> 
 
<div class="divThree">Three</div> 
 

 
</body> 
 
</html>

、誰かが私を助けてください。どのように世界でこれは同じ行に整列していません。しかし、私が100％（98％以下のような）を下回るようにこれらのどれかの％を減らすと、これらは整列します。しかし、マージンがなければ、パディングはありません。この幅のギャップが必要なのはなぜですか？

出典

2017-12-11 Deadpool

の可能性のある重複した[インラインブロック要素間のスペースを削除する方法？]（https://stackoverflow.com/questions/5078239/how-to-remove-the-space-インラインブロック要素間） – Swellar

古いインラインブロックの手間を省き、[Flex almighty]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/） –

私は 'inline-block'要素の間の「空白」を取り除く方法と、なぜこれが起こるのか、また調べる価値のある代替方法について説明する実用的なデモンストレーションを提供しました（スポイラー：' flex-box'を含めません）。見てみましょう：https://codepen.io/UncaughtTypeError/pen/ypBMXB – UncaughtTypeError

あなたは、ブラウザによって解釈空白をキャンセルするためにあなたのdivの間HTMLコメントを追加する必要があります。

*{margin:0px;padding:0px;} 
 
div{display:inline-block;} 
 
.divOne{background:yellow;width:20%;} 
 
.divTwo{background:green;width:60%;} 
 
.divThree{background:red;width:20%;}

<div class="divOne">One</div><!-- 
 
--><div class="divTwo">Two</div><!-- 
 
--><div class="divThree">Three</div>

出典

2017-12-11 08:06:06 Zenoo

これらの空白はどこから来ましたか？私はチェックした、スペースは残っていないが、次の行に行くために "Enter"だけ！ :( – Deadpool

これは問題です。改行は空白として解釈されます^^ – Zenoo

あなたは、それはもっと多くの方法があるので、彼はいつも真実ではないコメントが必要であることを意味します:) –

ホワイトスペースはそれほどにこれを行うように、ブラウザのinterpreteドのdiv取得する：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
*{ 
    margin:0; 
    padding:0; 
} 
div{ 
display:inline-block; 
margin:0; 
padding:0; 
} 
.divOne{background:yellow;width:20%;} 
.divTwo{background:green;width:60%;} 
.divThree{background:red;width:20%;} 
</style> 
</head> 
<body> 

<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div> 

</body> 
</html>

出典

2017-12-11 08:13:41 MrSman

奇妙なスペースinline-blオックは与える。 https://css-tricks.com/fighting-the-space-between-inline-block-elements/

ハッキング/トリックを避けるために、3つのdivを1つの行に含めることができます。

https://jsfiddle.net/dghkcg04/

<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>

出典

2017-12-11 08:24:49 Gezzasa

流体を使用したインラインブロックの表示同じラインをアラインメントしないデザイン

答えて

関連する問題