CSS边距和填充新手问题答案

【问题标题】：css margin and padding newbie questionCSS边距和填充新手问题
【发布时间】：2011-09-28 00:20:10
【问题描述】：

我正在努力适应以下 html 和 css 代码的行为。我知道盒子布局和边距折叠，但它似乎无法解释以下内容：

1) 使用下面未修改的代码，显示的徽标与页面顶部之间有大约 10 像素的空白，下方大约有 4 或 5 像素，但颜色由#allcontent.background-color 给出。有趣的是，如果我将正文中的 font-size 属性设置为 0px，这会删除徽标上方的所有空白区域以及徽标下方的 4 或 5 个像素。

2) 如果 #allcontent 中的填充值从 0px 更改为 1px，则实际上在徽标上方和下方添加了大约 10px 的填充，颜色由 #allcontent.background-color 指定。

index.html 文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Home</title>
        <link rel="stylesheet" type="text/css" href="my.css" />
    </head> 

    <body>
        <div id="allcontent">
        <div id="header">           
            <p>
            <img width="200" height="60" src="images/logo.gif" alt="Logo" />
            </p>
            </div>
        </div>      
    </body>
</html>

my.css 文件：

body {      
    margin: 0px;
    padding: 0px;
}

#allcontent{
    background-color: #dddddd;
    padding: 0px;
    margin: 0px;    
}

#header {   
    padding: 0px;
    margin: 0px;
}

【问题讨论】：

标签： html css padding margin

【解决方案1】：

这是你的代码：http://jsbin.com/eronaq

从更简单的问题开始：

徽标显示为 [..] 大约 4 或 5 像素以下

该间隙是为 g 和 p 等字母的文本中的下行字母保留的空间。

您可以通过几种方式解决此问题。例如，通过在img 上将display: block 或vertical-align 设置为top 或bottom。

display: block:http://jsbin.com/eronaq/2

徽标显示为大约 10 像素它和顶部之间的空白页面

见：http://reference.sitepoint.com/css/collapsingmargins

那个空间是p 上的margin-top 一直折叠到body，因为没有什么可以阻止它按照折叠边距规则的定义进行操作。

“触摸”是指位于没有填充、边框或内容存在于相邻边距之间。

【讨论】：