Question

我有以下CSS代码，这在我的标题图片之后会以某种方式导致非常大的空白区域。你能帮我确定一下它的来源吗？

enter image description here

这里是CSS，你看到我在这里犯了错误吗？

   body {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

    #report { width: 835px; }

    table{
    border-collapse: collapse;
    border: none;
    font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: black;
    margin-bottom: 10px;
}

    table td{
    font-size: 12px;
    padding-left: 0px;
    padding-right: 20px;
    text-align: left;
}

    table th {
    font-size: 12px;
    font-weight: bold;
    padding-left: 0px;
    padding-right: 20px;
    text-align: left;
}

h2{ clear: both; font-size: 130%;color:#354B5E;position:relative;}

h3{
    clear: both;
    font-size: 75%;
    margin-left: 20px;
    margin-top: 30px;
    margin-bottom: 50px;
    color:#475F77;
}

h4{
    clear: both;
    font-size: 90%;

    text-align: right;
    vertical-align: bottom;
    color:#475F44;
}

.wrap {
    font-size: 60%;    
    text-align: right;
    vertical-align: bottom;
    color:#FFFFFF;      
    position:relative;
background:#466788;
    margin:0 auto;
    width:100%;
    }

    #header, #footer {
        position:fixed;
        bottom:0;
        right: 0%;
        z-index:999999;
        background:#466788;
            /*text-align: right;*/
        color:#FFFFFF;
        width:100%;
    }

img { 
position: relative; 
top: 0; 
left: 0;
width : 100%; 
margin-bottom : 500px;
} 

p{ margin-left: 20px; 
     font-size: 12px; }

table.list{ float: left; }

    table.list td:nth-child(1){
    font-weight: bold;
    border-right: 1px grey solid;
    text-align: right;
    position: relative;
}

table.list td:nth-child(2){ padding-left: 7px; }
table tr:nth-child(even) td:nth-child(even){ background: #BBBBBB; }
table tr:nth-child(odd) td:nth-child(odd){ background: #F2F2F2; }
table tr:nth-child(even) td:nth-child(odd){ background: #DDDDDD; }
table tr:nth-child(odd) td:nth-child(even){ background: #E5E5E5; }
div.column { width: 320px; float: left; }
div.first{ padding-right: 20px; border-right: 1px  grey solid; }
div.second{ margin-left: 30px; }
table{ margin-left: 20px; }

和HTML

<title>Migrations for 2014-06-11 0800</title>
<link rel="stylesheet" type="text/css" href="file://dellbook/Migmon/MigMon.css" />
</head><body>
<img src="\\DELLBOOK\Migmon\logo.jpg" width=100%><h2>Migration Group: <b>2014-06-11 0800</b></h2><P>Great work today, all remaining computers for this Migration group are marked as 'Migration Completed' in SharePoint.</P>
<table id="my_table">
<colgroup><col/><col/><col/><col/><col/><col/><col/></colgroup>
<thead>
<tr><th>MigrationStatus</th><th>User</th><th>ComputerName</th><th>Location</th><th>Ipv4</th><th>Domain</th><th>Online</th></tr>
</thead>

Answer 1

这是你的问题：

margin-bottom : 500px;

下面：

img { 
position: relative; 
top: 0; 
left: 0;
width : 100%; 
margin-bottom : 500px;
}

将其删除或更新为：

margin-bottom : 0;

Answer 2

img
{
margin-bottom:500px;
}

that's the issue

Answer 3

在你的代码中你有底边：500px;在img。如果徽标是唯一使用的图像，则可以解释下方500px的间隙。

Answer 4

在 img 选择器中，您已在底部设置了边距。

在这段代码中：

    img { 
        position: relative; 
        top: 0; 
        left: 0;
        width : 100%; 
        margin-bottom : 500px;
    }

这一行是你的问题：

margin-bottom : 500px;

尝试删除此行或将其更改为您希望的值。

CSS：找到页面中大空格的原因

4 个答案: