1. ホーム
  2. 質問と答え
  3. 2つのブロック間のギャップ

2つのブロック間のギャップ

2017-12-14 12 views
0

それぞれ3つのスパンからなる2つのページブロックを持っています。 1つのスパンには2つのスパンが含まれています。私が達成しようとしているのは、これら2つのブロックの間のギャップを取り除くことです。この例を見てください。マージンとパディングはゼロに設定されます。2つのブロック間のギャップ

.wrapper { 
 
    display: inline-block; 
 
\t background-color: grey; 
 
\t padding: 25px; 
 
\t width: 50%; 
 
} 
 

 
.olive { 
 
\t display: block; 
 
\t height:50px; 
 
\t line-height: 50px; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t float: left; 
 
\t background-color: olive; 
 
    
 
} 
 

 
.blue { 
 
\t display: block; 
 
\t height:50px; 
 
\t line-height: 50px; 
 
\t width: 50px; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t float: right; 
 
\t background-color: #BCDBEA; 
 
\t text-align: center; 
 
\t border-radius: 50%; 
 
    cursor: default; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width"> 
 
<title></title> 
 
<link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
<span class="wrapper"> 
 
    <span class="olive">The box with some text</span> 
 
    <span class="blue">?</span> 
 
</span> 
 
<span class="wrapper"> 
 
    <span class="olive">The box with some text</span> 
 
    <span class="blue">?</span> 
 
</span> 
 
</body> 
 
</html>

出典

2017-12-14 kilogram

+0

あなたは、両方のページの同じ側にあることにそれらをしたい場合は、なぜあなたはそれらを浮遊していますか？不要なフロートを取り除くと、問題はなくなります。 – TylerH

+0

実際に重複するIMHOではありません。これは、ベースラインの下の行の高さのギャップについてのものです。もう1つの問題は、タグ間の空白文字のようです... –

+0

そうです。もう1つの質問は、水平方向の空間を解決します。そして、それは垂直空間を解きます。そして解決策は、ここで縦に整列し、フォントサイズは他の質問に基づいています – kilogram

答えて

1

これは、p、GまたはJの下の部分が行く "ラインディセンダースペース"、です。 「インライン」要素にスパンされているので、文字がどこにあるかのように「行内に」配置されます。インラインブロックも "インライン"です。ライン上に配置されている "場所"を変更するだけです。インライン要素のデフォルトでは、垂直線は "ベースライン"です。vertical-align:bottom

また、ラインハイト：0ブロックおよび「フロート」

.wrapper { 
 
    display: inline-block; 
 
\t background-color: grey; 
 
\t padding: 25px; 
 
\t width: 50%; 
 
    vertical-align:bottom; 
 
} 
 

 
.olive { 
 
\t display: block; 
 
\t height:50px; 
 
\t line-height: 50px; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t float: left; 
 
\t background-color: olive; 
 
    
 
} 
 

 
.blue { 
 
\t display: block; 
 
\t height:50px; 
 
\t line-height: 50px; 
 
\t width: 50px; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t float: right; 
 
\t background-color: #BCDBEA; 
 
\t text-align: center; 
 
\t border-radius: 50%; 
 
    cursor: default; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width"> 
 
<title></title> 
 
<link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
<span class="wrapper"> 
 
    <span class="olive">The box with some text</span> 
 
    <span class="blue">?</span> 
 
</span> 
 
<span class="wrapper"> 
 
    <span class="olive">The box with some text</span> 
 
    <span class="blue">?</span> 
 
</span> 
 
</body> 
 
</html>

出典

2017-12-14 17:17:10

0

あなたは、ディスプレイを使用している：インラインブロック、空白/ブロック間のディセンダを保存または表示（SOないディセンダ空間は存在しません）。外側のラッパーを追加し、font-sizeを0に設定すると、空白が無効になります（ラッパーのフォントサイズをリセットする必要があります）。

.wrapper { 
 
    display: inline-block; 
 
\t background-color: grey; 
 
\t padding: 25px; 
 
\t width: 50%; 
 
    font-size: 1rem; 
 
} 
 

 
.olive { 
 
\t display: block; 
 
\t height:50px; 
 
\t line-height: 50px; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t float: left; 
 
\t background-color: olive; 
 
    
 
} 
 

 
.blue { 
 
\t display: block; 
 
\t height:50px; 
 
\t line-height: 50px; 
 
\t width: 50px; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t float: right; 
 
\t background-color: #BCDBEA; 
 
\t text-align: center; 
 
\t border-radius: 50%; 
 
    cursor: default; 
 
} 
 

 
.outer-wrapper { 
 
font-size: 0; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width"> 
 
<title></title> 
 
<link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
<div class="outer-wrapper"> 
 
<span class="wrapper"> 
 
    <span class="olive">The box with some text</span> 
 
    <span class="blue">?</span> 
 
</span> 
 
<span class="wrapper"> 
 
    <span class="olive">The box with some text</span> 
 
    <span class="blue">?</span> 
 
</span> 
 
</div> 
 
</body> 
 
</html>

出典

2017-12-14 17:17:58 delinear

 関連する問題

  • 関連する問題はありません^_^