なぜ余白の上下が欠落していますか？

-1

.separator { 
 
    border: 1px solid #000000; 
 
    margin: 10px; 
 
}

<!DOCTYPE html> 
 
<html lang="zh-CN"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Separator</title> 
 
    </head> 
 
    <body> 
 
     <div> 
 
      <span>hello</span> 
 
      <span class="separator"></span> 
 
      <span>world</span> 
 
     </div> 
 
    </body> 
 
</html>

<span class="separator"></span>はマージントップ及びマージンボトムを持っていない私はなぜだろうか？次の2つの写真は私の問題をはっきりと説明することができます。

あなたは、セパレータの境界線が上から下にある見ることができます：

しかし、コンソールは、マージントップ及びマージン底が10pxの両方であることを示しています

ので、マージントップとマージンボトムですか？

出典

2017-03-03 hellozjf

スパンはインライン要素なので、マージンは垂直方向（上下）に影響しません。水平マージンを使用するようにDIV内のスパンを囲みます。

.margin { 
    margin: 10px 0 10px 0; 
} 
.separator { 
    border: 1px solid #000000; 
    margin: 10px; 
} 

<div class="margin"> 
    <span>hello</span> 
    <span class="separator"></span> 
    <span>world</span> 
</div>

出典

2017-03-03 06:38:13 Jhay

インライン要素がページ上のコンテンツとともに流れるため、上下の余白はインライン要素に影響しません。インライン要素に左右のマージン/パディングを設定できますが、上または下は設定できません。これはコンテンツの流れを妨害するためです。ブロックレベルの要素がコンテンツの流れを乱すので、ブロック（またはインラインブロック）にマージンを設定できます。

これはCSS2 specification on inline formatting of elementsからのものである：コンテキストをフォーマットインラインで

、ボックスを含むブロックの先頭から始まる、水平に次々に配置されています。水平マージン、境界線、およびパディングは、これらのボックスの間で尊重されます。

出典

2017-03-03 06:41:07 mjzeus

<span>タグがinline表示プロパティを使用して、デフォルトであり、それらは垂直マージンを尊重していないことのために、彼らは唯一の水平方向のマージンを尊重CSS2仕様状態の、以下のリファレンスを参照してください

セクション9.2.4。：

インラインこの値は、要素が1つのまたは複数のインラインボックスを生成させます。さらに上のCSS2仕様（セクション9.4.2）において、我々はは、インライン要素のみ

ブロックレベル要素だけ水平マージンを尊重インラインレベル要素に対し水平と垂直の両方の利益を尊重水平マージンを尊重すると言われ得ます。
インラインブロックでプロパティを変更した場合は、それを尊重しますが、垂直バーを実現するためには、さらにスタイルを変更する必要があります。

出典

2017-03-03 06:43:06 user2809299

この

body{padding:0;margin:0;} 
 
.separator { 
 
border: 1px solid #000000; 
 
margin: 10px; 
 
display:inline-block;height:20px;vertical-align:middle 
 
}

<!DOCTYPE html> 
 
<html lang="zh-CN"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Separator</title> 
 
    </head> 
 
    <body> 
 
     <div> 
 
      <span>hello</span> 
 
      <span class="separator"></span> 
 
      <span>world</span> 
 
     </div> 
 
    </body> 
 
</html>

を試してみてください

出典

2017-03-03 07:03:29 sayyednoman

なぜ余白の上下が欠落していますか？

答えて

関連する問題