Почему набор полей превышает высоту своего контейнера, когда высота установлена на 100%?

#html #css

#HTML #css

Вопрос:

Смотрите мой код в действии по адресу: http://losthobbit.net/temp/radiogroup.html

Вот код:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Radio Group Test</title>
</head>
<body>
    <div id="Radiogroup" style="position: absolute; top: 9px; left: 12px; width: 234px; height: 177px; background-color:Aqua">
        <fieldset style="height: 100%">
            <legend>Radiogroup</legend>
        </fieldset>
    </div>
</body>
</html>

Почему набор полей превышает высоту div?

Заранее спасибо

Ответ №1:

Браузеры добавляют некоторые дополнения к наборам полей по умолчанию. Поскольку обычно это соответствует оригинальной модели W3C box, заполнение увеличивает высоту, а не является ее частью, отсюда и то, что вы видите. Вы можете легко устранить это, установив нулевое заполнение в вашем наборе полей.

Вы также должны учитывать высоту легенды, которая выступает из верхней части набора полей. Однако это немного сложнее отрицать; возможно, вам придется поиграть со стилями расположения, полями и так далее, Чтобы сохранить это на месте, но не позволить этому повлиять на ваш набор полей.

1. Вы слишком торопитесь с ответом. Спасибо за объяснение о том, что заполнение добавляется к высоте, а не является частью набора полей. Не знал об этом, фактически никогда не замечал этого.

Ответ №2:

Это вызвано таблицей стилей браузера. Например, в Chrome добавляется некоторое заполнение:

     fieldset {
display: block;
-webkit-margin-start: 2px;
-webkit-margin-end: 2px;
-webkit-padding-before: 0.35em;
-webkit-padding-start: 0.75em;
-webkit-padding-end: 0.75em;
-webkit-padding-after: 0.625em;

Попробуйте использовать reset.css или просто set padding: 0 в вашем наборе полей.