【问题标题】:How can I remove a strange padding in my HTML div?如何删除 HTML div 中的奇怪填充?
【发布时间】:2019-04-08 06:13:53
【问题描述】:

我正在使用 CSS 构建布局,自定义一些“div”标签。其中(id 为“col3”的 div)有一个奇怪的 padding-top,我不知道为什么。我已经尝试使用 'padding: 0;',但它不起作用。我知道我可以使用属性“位置”来修复它,但为什么我的 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@server.com
                </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;
}

Obs:我知道'float' 不太习惯这样做,但我正在使用它,因为我在课程中学习此属性并且需要在项目中使用它。

【问题讨论】:

  • 您能否更具体地说明问题出现在哪里?
  • 您说的是&lt;address&gt; 块内&lt;p&gt; 标签的默认边距吗?尝试将p { margin: 0 } 添加到您的样式表并删除bottom: 20px; 作为测试并查看
  • 没什么意外的; p 只是具有固有的padding-top,而label 没有。您需要删除 p 填充或在标签上设置一些。
  • 我删除了“p”边距,它正在工作。谢谢!

标签: html css css-float


【解决方案1】:

删除&lt;p&gt; 边距,该标签具有&lt;label&gt; 没有的固有填充。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-08-03
    • 1970-01-01
    • 1970-01-01
    • 2014-08-10
    • 1970-01-01
    • 2015-03-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多