Question

我正面临将div扩展到页面顶部的问题。页面顶部有一个空白区域，我想删除它。请在下面找到HTML：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Mastermind</title>
    <link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
    <div class="top">
       <div class="header">
        <table width="100%";>
            <tr valign="middle">
                <td style="width:30%">
                    <img alt="a" src="Images/images.jpg" />        
                </td>

                <td valign="middle" style="float:right; width:70%;">
                        Call us:+1 800 123 4567  |  F T G
                </td>
            </tr>
        </table>

       </div>
    </div>
</body>
</html>

以下是CSS：

body
{
    background-color:#F0F8FF;
    width:100%;
    vertical-align:top;
    height:100%;
margin:0px;
padding:0px;
} 

.top
{
    background-color:#666;
width:100%;
height:25%;
margin:0px 0px 0px 0px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
padding:0px;
}

.header
{
width:70%;
margin-left:15%;
margin-right:15%;
border:solid 1px black;
margin-top:50px;
}

我希望div top放在浏览器的顶部。

Answer 1

只需删除margin-top:50px;

中的keep margin-top:0px;或.header即可

Answer 2

只需从标题中删除margin-top: 50px;，然后从正文中移除＃，然后它将应用边距0或使其成为-8以准确到达顶部，从JSFiddle {{3}查看您的代码}

Answer 3

只需删除此代码的margin-top：

.header {
    width:70%;
    margin-left:15%;
    margin-right:15%;
    border:solid 1px black;
    margin-top:50px;
}

改变身体而不是#BODY。：d

JSFiddle：http://jsfiddle.net/M65Zc/

Answer 4

您可以在css文件的顶部应用css重置，如下所示：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, #header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, hgroup, menu,  section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
margin: 1em 0 1em;
padding-left: 2em;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

然后，您为.top和.header类设置margin: 0。

HTML，CSS - 页面顶部有一个空白区域，我想删除它

4 个答案: