Почему <div> имеет размер меньше, чем его содержимое? (С видео)

xintrea · 03.04.2019 19:34:35

У меня версточный кретинизм. В связи с чем возник вопрос.

Используется Bootstrap 3. Есть такой код (блок-контейнер, естественно, есть, но не показан):

...
<div class="row">
    <div class="col-xs-12 col-xs-offset-0">

        <!-- Логин -->
        <div class="form-group">
            <label for="email" class="col-md-4 control-label">Логин</label>

            <div class="col-md-6">
                <input id="name" type="text" class="form-control" ...>
            </div>
        </div>

        <!-- Пароль -->
        <div class="form-group">
            <label for="password" class="col-md-4 control-label">Пароль</label>

            <div class="col-md-6">
                <input id="password" type="password" class="form-control" ...>
            </div>
        </div>
...

Проблема в том, что блок(и) с классом form-group имеет размер 510x0, несмотря на то, что внутри него размещены элементы совсем не нулевых размеров по вертикали.

Видео: https://www.youtube.com/watch?v=LD_lK_UrsVg

Вопрос: почему так происходит? Как исправить? Ведь мне нужно чтобы между полями ввода был отступ (который подсвечивается желто-розовым цветом). И он есть, но только болтается сверху из-за того, что высота блока нулевая. А нужно, чтоб блок был размером с его содержимое.

UPD:
На всякий случай, полный код страницы: https://pastebin.com/CJtHAyGK

Изменено xintrea (03.04.2019 19:51:43)

artoodetoo · 04.04.2019 05:34:11

Как неверстальщик предположу:
Классы col- всегда оборачиваются в row. Они должны быть непосредственными соседями. Класс raw обладает умением оборачиваться вокруг плавающих блоков. У тебя не во всех случаях кол и роу соседи.

xintrea · 04.04.2019 11:05:28

Дело было в том, что форме я забыл назначить класс form-horizontal.

Правда, как человеку, далекому от верстки, мне все равно непонятно, как так выходит, что у непустого блока высота становится нуливой.

artoodetoo · 04.04.2019 11:12:47

Такова природа вещей. Это надо принять и запомнить: плавающий блок выпадает из потока. Приходится предпринимать специальные усилия чтобы обволакивать его.

artoodetoo · 04.04.2019 11:13:54

https://www.w3schools.com/css/css_float.asp

xintrea · 04.04.2019 11:35:57

Такова природа вещей. Это надо принять и запомнить: плавающий блок выпадает из потока. Приходится предпринимать специальные усилия чтобы обволакивать его.

Так в том-то и дело, что внутри блока находятся как inline-блоки (label) так и обычные блоки (само поле ввода). И тем не менее окружающий блок имеет высоту ноль.

artoodetoo · 04.04.2019 16:08:18

col-* имеет float: left. За остальные не поручусь. У тебя каждый инпут в плавающем блоке. Этого достаточно чтобы нуждаться в очистке.

Изменено artoodetoo (04.04.2019 16:09:03)

Laravel по-русски

#1 03.04.2019 19:34:35

Почему <div> имеет размер меньше, чем его содержимое? (С видео)

#2 04.04.2019 05:34:11

Re: Почему <div> имеет размер меньше, чем его содержимое? (С видео)

#3 04.04.2019 11:05:28

Re: Почему <div> имеет размер меньше, чем его содержимое? (С видео)

#4 04.04.2019 11:12:47

Re: Почему <div> имеет размер меньше, чем его содержимое? (С видео)

#5 04.04.2019 11:13:54

Re: Почему <div> имеет размер меньше, чем его содержимое? (С видео)

#6 04.04.2019 11:35:57

Re: Почему <div> имеет размер меньше, чем его содержимое? (С видео)

#7 04.04.2019 16:08:18

Re: Почему <div> имеет размер меньше, чем его содержимое? (С видео)

Подвал раздела