Как я могу удалить странное дополнение в моем HTML-разделе?

Я создаю макет с помощью 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;
}

Наблюдения: я знаю, что «поплавок» не так часто используется для этого, но я использую его, потому что я узнаю об этом свойстве в курсе, и мне нужно использовать его в проекте.

Не могли бы вы уточнить, где возникает проблема?

user3727648 08.04.2019 00:06

вы говорите о полях по умолчанию для тегов <p> внутри блока <address>? Попробуйте добавить p { margin: 0 } в свою таблицу стилей и удалить этот bottom: 20px; в качестве теста и посмотреть

zgood 08.04.2019 00:07

Ничего неожиданного; p просто имеет присущее padding-top, чего нет у label. Вам нужно либо удалить отступ p, либо установить его на этикетке.

Obsidian Age 08.04.2019 00:11

Я удалил поле «p», и это работает. Спасибо!

user11229156 08.04.2019 00:11
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
4
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Удалите поле <p>, у этого тега есть внутренний отступ, которого нет у <label>.

Другие вопросы по теме