浮動小数点数の後ろにスペースがあるのですが、どうすれば削除できますか？

私はfloat: right;を使いたかったのですが、divの後ろに空白があり、divがmargin-bottomのように見えましたが、実際にはありませんでした。
なぜですか？
float: right;で作成されたスペースを削除するにはどうすればよいですか？浮動小数点数の後ろにスペースがあるのですが、どうすれば削除できますか？

.container { 
 
    background-color: #bbbbbb; 
 
    width: 70%; 
 
} 
 

 
.line { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.child { 
 
    background-color: coral; 
 
    height: 2em; 
 
    width: 50%; 
 
    float: right; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
      <div class="line"><div class="child"></div></div> 
 
      <div class="line"><div class="child"></div></div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-12-28 S Adrian

この現象は、ネストされた浮上要素（.child）の収容要素（.line）で宣言display: inline-block性の結果です。兄弟要素の間に「空白」を作成します。

これを解決するには、以下に示すように、包含要素（.line）のvertical-alignプロパティを宣言することを検討してください。

.line { 
    display: inline-block; 
    width: 100%; 
    vertical-align: top; /* additional */ 
}

注：このプロパティの値は、によりブロック要素のインライン性質にこの要素に適用することができます。

コードスニペットデモンストレーション：

.container { 
 
    background-color: #bbbbbb; 
 
    width: 70%; 
 
} 
 

 
.line { 
 
    display: inline-block; 
 
    width: 100%; 
 
    vertical-align: top; /* additional */ 
 
} 
 

 
.child { 
 
    background-color: coral; 
 
    height: 2em; 
 
    width: 50%; 
 
    float: right; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="line"> 
 
     <div class="child"></div> 
 
    </div> 
 
    <div class="line"> 
 
     <div class="child"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-12-28 09:58:34 UncaughtTypeError

display: flex;

.container { 
 
    background-color: #bbbbbb; 
 
    width: 70%; 
 
} 
 

 
    
 

 
.child { 
 
    background-color: coral; 
 
height: 3em; 
 
width: 50%; 
 
display: flex; 
 
margin-left: auto;; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="line"> 
 
     <div class="child"></div> 
 
    </div> 
 
    <div class="line"> 
 
     <div class="child"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

を使用してみてください

出典

2018-01-01 14:25:55

浮動小数点数の後ろにスペースがあるのですが、どうすれば削除できますか？

答えて

関連する問題