Я создаю макет с помощью CSS, настраивая некоторые теги «div». Один из них (div с идентификатором «col3») имеет странный отступ, и я не знаю, почему. Я уже пытался использовать 'padding: 0;', но это не работает. Я знаю, что могу исправить это с помощью свойства position, но почему это происходит с моим div? Коды такие:
HTML
<section id = "getintouch">
<h3>Get in Touch</h3>
<p>Etiam at mi at quam suscipit auctor a ac urna. Nullam non euismod felis, sed rhoncus risus. Donec erat enim, convallis eu facilisis at, hendrerit sed ligula.</p>
<div id = "getintouchlayout">
<div id = "col1-2">
<form action = "#" method = "POST">
<label for = "name">Name</label>
<input type = "text" name = "nome" id = "name">
<label for = "email">Email</label>
<input type = "email" name = "email" id = "email">
<label for = "message">Message</label>
<textarea name = "message" id = "message"></textarea>
<input type = "submit" value = "Send Message">
</form>
</div>
<div id = "col3">
<address>
<p>
<span>Endereço</span>
1234 Somewhere Rd. Nashville, TN 00000 United States
</p>
<p>
<span>Telefone</span>
000-000-000
</p>
<p>
<span>Email</span>
[email protected]
</p>
</address>
</div>
</div>
</section>
CSS
#getintouchlayout{overflow: auto;}
#col1-2{
width: 63.5%;
margin-right: 5%;
float: left;
}
#col3{
width: 31.5%;
float: right;
}
Наблюдения: я знаю, что «поплавок» не так часто используется для этого, но я использую его, потому что я узнаю об этом свойстве в курсе, и мне нужно использовать его в проекте.
вы говорите о полях по умолчанию для тегов <p> внутри блока <address>? Попробуйте добавить p { margin: 0 } в свою таблицу стилей и удалить этот bottom: 20px; в качестве теста и посмотреть
Ничего неожиданного; p просто имеет присущее padding-top, чего нет у label. Вам нужно либо удалить отступ p, либо установить его на этикетке.
Я удалил поле «p», и это работает. Спасибо!






Удалите поле <p>, у этого тега есть внутренний отступ, которого нет у <label>.
Не могли бы вы уточнить, где возникает проблема?