font-family：monospaceが私のレイアウトを変更する理由<dl>

Question

ddとdt要素を同じ行に配置する方法については、this answerのコードを使用しています。

次のコード：

dl { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background:#ff0; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
dt { 
 
    float: left; 
 
    text-align: right; 
 
    width: 20%; 
 
    background: #cc0; 
 
    padding: 0; 
 
    margin: 0; 
 

 
    font-weight: bold; 
 
    /* Question 2 */ 
 
    /* font-family: monospace; */ 
 
    margin-right: 10%; 
 
} 
 
dd { 
 
    float: left; 
 
    text-align: left; 
 
    width: 70%; 
 
    background: #dd0; 
 
    padding: 0; 
 
    margin: 0; 
 
    /* Question 1 */ 
 
    /* font-family: monospace; */ 
 
}

<dl> 
 
    <dt>cat</dt><dd>small, domesticated feline</dd> 
 
    <dt>bear</dt><dd>large omnivore (top land predator)</dd> 
 
    <dt>giraffe</dt><dd>the most useless quadruped</dd> 
 
</dl>

が...このイメージを生成します。

しかし、私はddかのどちらかにfont-family:monospaceを適用しようとすると、 dt要素はレイアウトが壊れます。

など。私はQuestion 1ライン以下のコメントを削除する場合、これは私が見たものである。

私はQuestion 2ライン以下のコメントを削除した場合、私は見てそれほど劇的な失敗が、それでも快適ではない得るのに対し：

を

私が理解したいと思います：

1. なぜfont-family: monospaceはそれほど（特にdd素子用）

Answer 1

理由は、使用されるフォントの異なる行の高さであることを解決する方法レイアウトを動揺することができます。システムのモノスペースフォントは、使用される他のフォントよりわずかに小さいです。これにより、ddおよびdt要素の高さが異なります。さて、最初のケース（ddはモノスペース）では、最初のdtの文字通り1ピクセル左のようなものがあるため、2番目のdt要素は最初のddの下にあるため、フローティングのためにそこに配置されます。

両方がモノスペースに設定されている場合は、すべてのエレメントの線高が同じであるため、再びモノスペースになります。

dl { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background:#ff0; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
dt { 
 
    float: left; 
 
    text-align: right; 
 
    width: 20%; 
 
    background: #cc0; 
 
    padding: 0; 
 
    margin: 0; 
 

 
    font-weight: bold; 
 
    /* Question 2 */ 
 
    /* font-family: monospace; */ 
 
    margin-right: 10%; 
 
} 
 
dd { 
 
    float: left; 
 
    text-align: left; 
 
    width: 70%; 
 
    background: #dd0; 
 
    padding: 0; 
 
    margin: 0; 
 
    /* Question 1 */ 
 
    font-family: monospace; 
 
} 
 
dd, dt { 
 
    line-height: 14px; 
 
}

<dl> 
 
    <dt>cat</dt><dd>small, domesticated feline</dd> 
 
    <dt>bear</dt><dd>large omnivore (top land predator)</dd> 
 
    <dt>giraffe</dt><dd>the most useless quadruped</dd> 
 
</dl>

を：あなたが唯一の固定幅フォントを使用するには、2つの要素のうちの1つを持っているしたい場合は別の方法として、あなたはまた、明示的に行の高さを設定することができます

dl { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background:#ff0; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
dt { 
 
    float: left; 
 
    text-align: right; 
 
    width: 20%; 
 
    background: #cc0; 
 
    padding: 0; 
 
    margin: 0; 
 

 
    font-weight: bold; 
 
    /* Question 2 */ 
 
    font-family: monospace; 
 
    margin-right: 10%; 
 
} 
 
dd { 
 
    float: left; 
 
    text-align: left; 
 
    width: 70%; 
 
    background: #dd0; 
 
    padding: 0; 
 
    margin: 0; 
 
    /* Question 1 */ 
 
    font-family: monospace; 
 
}

<dl> 
 
    <dt>cat</dt><dd>small, domesticated feline</dd> 
 
    <dt>bear</dt><dd>large omnivore (top land predator)</dd> 
 
    <dt>giraffe</dt><dd>the most useless quadruped</dd> 
 
</dl>

Answer 2

dlタグにフォントファミリーを指定してみてください全体のコンテンツのためのモノスペース。

dl { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background:#ff0; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: monospace; 
 
} 
 
dt { 
 
    float: left; 
 
    text-align: right; 
 
    width: 20%; 
 
    background: #cc0; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-weight: bold; 
 
    /* Question 2 */ 
 
    /* font-family: monospace; */ 
 
    margin-right: 10%; 
 
} 
 
dd { 
 
    float: left; 
 
    text-align: left; 
 
    width: 70%; 
 
    background: #dd0; 
 
    padding: 0; 
 
    margin: 0; 
 
    /* Question 1 */ 
 
    /* font-family: monospace; */ 
 
}

<dl> 
 
    <dt>cat</dt><dd>small, domesticated feline</dd> 
 
    <dt>bear</dt><dd>large omnivore (top land predator)</dd> 
 
    <dt>giraffe</dt><dd>the most useless quadruped</dd> 
 
</dl>