Загадочный пробел внизу элемента формы

#html #css #forms #spacing

#HTML #css #формы #интервал

Вопрос:

Когда форма помещается внутри div, по какой-то причине в нижней части формы всегда остается дополнительное пространство. Как нам избавиться от этого пробела?

Во фрагментах кода из stack overflow пробел фактически не отображается, но в любом другом месте он отображается. Приведенный ниже код — это все, что есть.

 div {
  border: 1px solid blue;
}
form {
  border: 1px solid red;
}

 <div>
  <form>
    Form
  </form>
</div>

1. Если вы не можете воспроизвести это здесь, мы не сможем помочь. Я предполагаю, что у вас где-то в вашем css определено некоторое поле. Вы можете использовать инструменты разработчика, чтобы проверить вычисленный CSS и посмотреть, откуда берется это поле / отступ

2. Или это может быть частью стилей по умолчанию для вашего браузера. Возможно, вы захотите изучить возможность сброса CSS.

3. @ItayGal Весь код здесь. Это просто что-то с фрагментом stackoverflow, который исправляет подобные вещи, когда это больше нигде не исправлено. Вот ссылка на страницу с проблемой: chatwithibot.com/testx.php

4. @ItayGal Вы сможете увидеть из исходного кода, что это все, что есть в самом коде.

Ответ №1:

Вы можете обратиться к инструментам веб-разработчика (F12), и вы увидите, что form элемент поставляется с margin-bottom: 1em , как определено в таблице стилей браузера по умолчанию:

Вы можете переопределить это, определив свое собственное правило полей:

 form { margin-bottom: 0; }

Ответ №2:

У вас есть margin-bottom: 16px . Удалите его, и это решит вашу проблему.