Почему font-family: monospace меняет макет моего <dl>

Я использую какой-то код из этого ответа на вопрос о том, как выравнивать элементы dd и dt в одной строке, а результаты - хорошие.

Следующий код:

 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>

ОТВЕТЫ

Ответ 1

Причина заключается в различной высоте строки используемых шрифтов. Ваш моноширинный шрифт системы немного меньше, чем другой используемый шрифт. Это приводит к разным высотам элементов dd и dt. Теперь, в первом случае (dd является моноширинным), второй элемент dt находится ниже первого dd, потому что буквально один пиксель слева от первой высоты dt, поэтому он помещается туда из-за плавающий.

Если оба параметра установлены в моноширину, это выглядит хорошо снова, потому что все элементы снова имеют одинаковую высоту строки.

 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>

Ответ 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>