html - div 没有对齐到 parent 的顶部

Question

我的 div 没有与其 parent 的顶部对齐。我认为这应该在没有任何额外的 css 命令的情况下自然发生。

这是一个正在发生的事情的例子。我给了所有的 div 边框，所以你可以看到它们居中而不是与顶部对齐。如果该信息有帮助，我也有关于此的砌体插件。

example

更新:

将所有边距和填充更改为 0 有效。以前没有用，我不知道为什么，也许没有正确保存。这是一个包含更改的独立页面。 p 标签仍然较低，但我认为这对于 p 标签来说是正常的。

这是一个包含的页面:http://advancedplaylabs.com/div_top_align.html

这是div

 <div class="main-container">
        <div class="main wrapper cleafix">
            
            <div id="content" class="container clearfix">
            
            <div class="item">
                <p style="border: 1px dashed green;">text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here. </p></div>
                
                                 </div>               
              
            </div>
  </div>

这是CSS

.main-container {
        position: relative; 
        top:0px;
        padding: 0px;
        margin: 0px:
             border: 1px dashed red;
    }

    .main {
        padding: 0px;
        margin: 0px:
    }

    #content {
        /*width: 980px;*/
        /*width: 95%;*/
        width: auto;
        margin: 0 auto;
        padding-top: 0px;
        border: 1px solid black;
    }

    .item {
        display: block;
        float: left;
        width: 300px;
        margin: 0 0 0px 0;
        padding: 0px;
        border: 1px solid aqua;
    }

Answer 1

如果您需要确保您的 div 与其父级的顶部对齐，我建议您简单地检查 div 本身以寻找可能的位置或无意/有意出现在您的 div 中的填充。

请注意您的类“item”div 是如何绝对定位在 id“content”div 中并将 top 属性设置为 30px...这会将其向下推 30px。

有很多这样的事情正在发生。你的内容类也有 30px 的填充顶部，你的主包装类有 5px 的填充顶部......

我可以继续，但我想你可以清楚地跟着我说:这不是自然发生的，它是有意的，它存在于你的 main.css 文件中。如果不是故意的，那么它正在被导入，您需要覆盖您的 div 以获得正确的样式，或者手动修改 main.css 类。

如果您对此有更多疑问，请查看并告诉我。

编辑:

让我们具体说明我注意到的问题及其解决方法，具体取决于您希望将 div 与其父元素顶部对齐的愿望:

.main, #content { padding-top: 0; }
p { margin-top: 0; }

请注意，我从 p 中删除了 margin-top 以便将我看到的所有元素与其父元素的顶部对齐。

如果您愿意，可以为特定元素下的所有 div 使用子选择器:

.main-container div { padding-top: 0; margin-top: 0; }