Question

在我提出自己的问题之前，我花了很多时间来查看所有其他类似的问题，但是他们要么没有解决我的问题，要么我承认，我不太理解他们。

我有一个div堆叠在另一个div里面，前面的div在它顶部有一些空间，我不能，为了我的生活，摆脱它。我已经弄乱了填充，边距，删除了两者，但它仍然存在。以下是CSS＆amp; HTML。问题div是mpcontent。以下是问题的图片：http://i44.tinypic.com/34i4hw7.png

提前致谢！

.mpfade {
    position: relative:;
    width: 250px;
    height: 450px;
    moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    opacity: 0.0;
    margin-top:-450px;
    margin-bottom: 100px;
}
.mpfade:hover {
    width: 250px;
    height: 450px;
    opacity: 0.95;
}
.mpb {
    width: 200px;
    height: 5px;
    background-color: transparent;
    border-top: 1px solid #FE9D04;
    border-bottom: 1px solid #FE9D04;
    margin-top: -8px;
    margin-bottom: 50px;
    margin-right: auto;
    margin-left: auto;
}
.mpbg {
    width: 250px;
    height: 450px;
    background-image:url(http://i42.tinypic.com/35hn6g2.jpg);
}
.mptain {
    overflow:hidden;
    position: relative;
    top: -68px;
    width: 200px;
    height: 84.9%;
    background-color:#fff;
    margin-left: auto;
    margin-right: auto;
}
.mptitle {
    margin-top: 10px;
    width:250px;
    background-color: #000;
    padding: 10px;
}
.postcount {
    position: relative;
    top: 0px;
    padding-top: 10px;
    color:#FE9D04;
    font-family: flamenco;
    font-weight: 300;
    font-size: 30px;
    text-transform: uppercase;
    font-style:italic;
    letter-spacing: 5px;
    text-align: center;
}
.mpalias {
    padding-top: 10px;
    color:#FE9D04;
    font-family: flamenco;
    font-weight: 300;
    font-size: 30px;
    text-transform: uppercase;
    font-style:italic;
    letter-spacing: -2px;
}
.istuff {
    font-family: calibri;
    font-size: 9px;
    color: #000;
    border-bottom: 1px solid #fe9d04;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 5px;
    margin-right: 8px;
    font-weight: bold;
    font-style: italic;
}
.ilink {
    border-radius: 50%;
    background-color: #fe9d04;
    width: 45px;
    height: 45px;
    line-height: 16px;
    text-align: center;
    padding: 5px;
    font-family: flamenco;
    font-weight: 300;
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
    font-style:italic;
    opacity: 0.6;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.ilink:hover {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
}
.mpcontent {
    background-color: #dedede;
    margin-left: auto;
    margin-right: auto;
    width: 180px;
    height: 450px;
    letter-spacing: 2px;
    text-align: left;
    color: #000;
    font-family: calibri;
    font-size: 8px;
    padding: 0px;
}
.mptext {
    padding-top: 5px;
    letter-spacing: 2px;
    text-align: left;
    color: #000;
    font-family: calibri;
    font-size: 8px;
    font-weight: bold;
}

<div style="width:200px; height: 400px; background-image:url(http://i42.tinypic.com/35hn6g2.jpg); padding: 25px;">
    <img src="">
</div>
<div class="mpfade">
    <div class="mpbg">
        <div class="mpb"></div>
        <div class="mptain">
            <div class=postcount>0</div>
            <div class="mpcontent">
                <table width="180px;">
                    <tr>
                        <td colspan="2" style="vertical-align: top" ;>
                            <div class="istuff">text</div>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top" ; "><div class=istuff>text</div></td>
<td style="vertical-align: top ";">
                            <div class=istuff>text</div>
                        </td>
                    </tr>
                    <tr>
                        <td>text</td>
                        <td>text</td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; padding-top: 5px">
                            <div class=istuff>text</div>
                        </td>
                        <td style="vertical-align: top; padding-top: 5px">
                            <div class=istuff>text/clan</div>
                        </td>
                    </tr>
                    <tr>
                        <td>text</td>
                        <td>text</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding-top: 10px">
                            <div class="istuff">text</div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">text</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding-top: 10px">
                            <div class="istuff">text</div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">text</td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; padding-top: 10px">
                            <center>
                                <div class=ilink><a href="">
text</a>
                                </div>
                            </center>
                        </td>
                        <td style="vertical-align: top; padding-top: 10px">
                            <center>
                                <div class=ilink><a href="">
text</a>
                                </div>
                            </center>
                        </td>
                    </tr>
                </table>
                <p>
                    <p>
                        <div class=mpalias>text</div>
                        <p>
                            <div class=mptext>is
                                <!-- |status| -->
                            </div>
            </div>
        </div>
    </div>
</div>
</div>

Answer 1

默认情况下，保证金具有不同的值，具体取决于您使用的浏览器。因此，要在不同浏览器之间使用相同的行为，您可以将margin值重置为0px。正如您在上面的示例中看到的那样：

html, body  {
    margin: 0px;
}

要在白色内容和灰色框之间留出空格，请将代码更新为：

.mptain {
    top: -45px;
}

而不是

.mptain {
    top: -68px;
}

而不是：

要查看示例工作检查this JSFiddle。

您可以获得有关margin如何运作here的更多信息。

你也可以使用CSS重置器，可以找到here。

Answer 2

浏览器默认添加样式。

写：

body,html{margin:0;}

最好通过编写以下来重置样式：

*{margin:0;padding:0;}

DEMO here.

Answer 3

您尚未格式化页面。

虽然您的代码解决了div元素的样式，但您没有设置body或html标签的样式。它们是div元素所在的包含元素。

html, body { margin: 0; }

Answer 4

这已经得到了解答，但我想更多地了解如何修复代码。

有很多因素会影响您网页的显示方式。如果您的代码未正确验证，某些浏览器将无法正确呈现它并使用不同的格式呈现它：http://validator.w3.org/

我可以轻松看到您的代码中存在多个错误。

                </table>
                <p>
                    <p>
                        <div class=mpalias>text</div>
                        <p>
                            <div class=mptext>is
                                <!-- |status| -->
                            </div>
            </div>
        </div>
    </div>
</div>
</div>

在：是

您缺少三个段落标记。它应该看起来像这样（从技术上讲，我认为你不应该使用三个段落标签，只需一个就足够了。）

                </table>
                <p>
                    <p>
                        <div class=mpalias>text</div>
                        <p>
                            <div class=mptext>is
                                <!-- |status| -->
                            </div>
                        </p>
                    </p>
                </p>
            </div>
        </div>
    </div>
</div>
</div>

这些样式属性搞砸了：

        <div class="mpcontent">
            <table width="180px;">
                <tr>
                    <td colspan="2" style="vertical-align: top" ;>
                        <div class="istuff">text</div>
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align: top" ; "><div class=istuff>text</div></td>

文本

应该是：

<td style="vertical-align: top;">

此外，您应始终将您的属性包装在引号中：

<div class="istuff">

从技术上讲，如果其中没有特殊字符，它将验证......但很容易忘记它们，虽然我没有测试过，但验证器可能会向你发出警告。将所有属性包装在引号中总是更容易和更有效。

这是一篇关于W3学校的文章：http://www.w3schools.com/html/html_attributes.asp

我还建议您移动所有内联样式：

<div style="width:200px; height: 400px; background-image:url(http://i42.tinypic.com/35hn6g2.jpg); padding: 25px;">

到你的样式表。从样式表中更容易维护样式;如果它们是内联的，你必须不断地编辑HTML代码。如果它们位于单独的样式表中，您只需在某些情况下编辑HTML，如果您需要进行重大更改。

在调用其他CSS样式之前使用reset.css文件也是一个好主意。我认为Eric Meyer的CSS解决方案是最全面的：http://meyerweb.com/eric/tools/css/reset/

不同的浏览器以不同的方式显示您的网站，因此reset.css有助于将所有基本样式重置为一个特定设置，因此它将在所有浏览器中显示相同的内容。它仍然会根据浏览器略有不同，但不会差不多。

Answer 5

我遇到了类似的问题。即使我按如下所示设置了html和body标签，我仍然得到了额外的空间，如图中顶部所示。对我来说，它在删除页面顶部的“ doctype html”标签后解决了。

html, body{
margin: 0px;
padding:0px;

}

Extra space on top

DIV顶部的额外空间

5 个答案: