div 部分的背景有无法解释的填充，为什么？答案

【问题标题】：Background of div section has unexplained padding, Why?div 部分的背景有无法解释的填充，为什么？
【发布时间】：2013-09-18 06:13:54
【问题描述】：

好的，我花了几天时间试图弄清楚为什么这不起作用，到目前为止，谷歌没有给我任何有用的信息。也许有一个我不知道的内置规则。我讨厌在这样的网站上发布可能是微不足道的问题，但我已经用尽了自己的努力。

所以我在我的 CSS 中放置了一个背景，它适用于 alotted 标签，但它添加了一些未指定的填充。试图改变它无济于事。正文的背景会延长屏幕的持续时间，但不会延长屏幕的持续时间。

此处是包含标头的位置。

<?php
    require_once 'classes/Membership.php';
    $membership = new Membership();
    $loggedin = $membership->confirm_loggedin();
    if(!$loggedin){
        ob_start();
        header("Location: http://lolteamrecruiter.com/login.php");
        ob_end_flush();    
    }

?>

<!DOCTYPE html>
<?php

include @ 'header.php';

?>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Login</title>
    </head>
    <body>

    <div id="Login">

        <!--LOGOUT BUTTON -->
        <p>
            Results Page
        </p>
    </div>
    </body>
</html>

这是包含的 php 文件。

<link href="css/header.css" rel="stylesheet" type="text/css" />

<div id="header">
    <a href="index.php"><img src="css/images/angel.png" height="40px" width="20px"></a> 

    <?php
    require_once 'classes/Membership.php';
    $membership = new Membership();
    $loggedin = $membership->confirm_loggedin();
    if($loggedin){
        echo '    <div id="header-right-account">
    <ul id="nav">
    <li><a href="#">My Account</a>
        <ul>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Tacos</a></li>
            <li><a href="#">Burritos</a></li>
            <li><a href="http://lolteamrecruiter.com/login.php?status=logout">Log Out</a></li>
        </ul>
    </li>
    </ul>
    </div>';

    }else{
     echo '<div id="header-right"><a href="login.php">Log In</a></div>';

    }
    ?>


</div>

这是应用背景的 css 文件

#header{

    background-image : url(images/black.png); 
    background-repeat : no-repeat; 
    background-size: 100% 100%;
    background-attachment : fixed;  
    background-origin:border-box;
    margin: 0 auto;
    padding: 0;
    top:0;

}

查看这个的网站是http://lolteamrecruiter.com/

【问题讨论】：

您是否使用任何 CSS 重置？
如果您在标题周围使用一些填充平均空间而不是尝试html,body { margin: 0; padding: 0; height: 100%。
同意，这对我有用

标签： php html css background padding

【解决方案1】：

您是指徽标周围的间距吗？只需将 display:block 添加到图像中即可。

编辑

好的，在正文中添加 margin:0。

【讨论】：

对不起，我的意思是我想让黑色标头一直到屏幕的两侧，一直到屏幕的顶部。两边都有空间，顶部是白色的（从身体背景来看）。
是的，tyvm。我知道这是愚蠢而明显的事情。是因为默认情况下，正文提供了边距，即使标题位于正文标签之前？
取决于浏览器，Chrome加了8px :)

【解决方案2】：

默认情况下，您的图像与基线对齐，这意味着它下方的间隙是 p、g、j 等字母下部的空间。

试试这个：

#header a img { vertical-align: middle; }

【讨论】：

【解决方案3】：

body {
  background-image : url(images/login-box-backg2.png) no-repeat; 
  background-size: 100% 100%;
  background-attachment : fixed;
  margin: 0;
  padding: 0;
}

【讨论】：