Css 在添加内容时自动添加间隙/填充/边距
我在包装器div中使用可堆叠div创建了一个简单的站点。问题是,每次我向添加内容时,它都会突然添加某种类型的空间,我无法摆脱它。div中的内容将是动态的,因此高度不总是相同的 为什么会发生这种情况?这是div的问题还是内容本身的问题 div下方的图像,无内容 div下方的图像包含内容 我的CSSCss 在添加内容时自动添加间隙/填充/边距,css,html,margin,padding,Css,Html,Margin,Padding,我在包装器div中使用可堆叠div创建了一个简单的站点。问题是,每次我向添加内容时,它都会突然添加某种类型的空间,我无法摆脱它。div中的内容将是动态的,因此高度不总是相同的 为什么会发生这种情况?这是div的问题还是内容本身的问题 div下方的图像,无内容 div下方的图像包含内容 我的CSS @charset "utf-8"; /* CSS Document */ /* Basic */ body { background-color: #666; font-family:
@charset "utf-8";
/* CSS Document */
/* Basic */
body {
background-color: #666;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#wrapper {
width: 900px;
height: auto;
margin: 10px auto;
position: relative;
background-color: #999;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
#header {
width: 900px;
height: 180px;
background-color: #9C0;
}
#menubar {
width: 900px;
height: 36px;
background-color: #906;
}
#content {
width: 900px;
height: 350px;
position: relative;
background-color: #036;
}
#footer {
width: 900px;
height: 40px;
position: relative;
background-color: #F90;
}
/* Nav */
#nav {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #000;
}
#nav li a:hover {
color: #000;
background-color: #fff;
}
我的HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="menubar">
<ul id="nav" >
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
查看您提供的CSS,似乎您忘记了对其进行规范化。至少在CSS文件的顶部添加以下内容:
* {
margin: 0;
padding: 0;
}
这将从元素中删除任何特定于浏览器的边距或填充,这可能会导致空白。查看您提供的CSS,您似乎忘记了对其进行规范化。至少在CSS文件的顶部添加以下内容:
* {
margin: 0;
padding: 0;
}
这将从元素中删除任何特定于浏览器的边距或填充,这可能会导致空白。还有一个名为Normalize.css的css脚本,它使浏览器呈现所有元素时更加一致,并符合现代标准。它只针对需要规格化的样式。
您可以从以下位置下载它:还有一个名为Normalize.css的css脚本,它使浏览器能够更一致地呈现所有元素,并符合现代标准。它只针对需要规格化的样式。
您可以从以下位置下载它:对我来说,CSS NORMALIZER也有同样的问题 我只是将这个css代码添加到主容器中:
border: 1px solid transparent;
似乎在所有主流浏览器上都可以使用IEs,除了IE6给你一个黑边框,因为你可能知道IE6不支持透明
希望这能有所帮助:-对我来说,CSS规范化器也有同样的问题 我只是将这个css代码添加到主容器中:
border: 1px solid transparent;
似乎在所有主流浏览器上都可以使用IEs,除了IE6给你一个黑边框,因为你可能知道IE6不支持透明
希望这能有所帮助:-你是在规范CSS吗?@jimjimmy1995我不知道那是什么,我在谷歌上搜索了这个词,发现这就是你所说的?基本上做了类似于*{margin:0;padding:0;}为了删除特定于浏览器的默认设置。请检查您的内容文件是否使用UTF-8和BOM进行编码。检查此页面:。您正在规范CSS吗?@jimjimmy1995我不知道那是什么,我在谷歌上搜索了这个术语,这就是您所说的。基本上做了类似于*{margin:0;padding:0;}为了删除特定于浏览器的默认设置。请检查您的内容文件是否未使用BOM以UTF-8编码。检查此页面:。在我处理页面并向其添加更多内容后,我意识到jimjimmy1995是您需要执行的方法。。。因为从另一方面来说,你会在你的网站的每个角落都有更多的1PX,因为BORDER 1PX SOLID。。。无论如何,我希望我能解释清楚。。thankx和thankx to jimjimmy1995当我在我的页面上工作并添加了更多内容后,我意识到jimjimmy1995是一种方法,这是你需要做的。。。因为从另一方面来说,你会在你的网站的每个角落都有更多的1PX,因为BORDER 1PX SOLID。。。无论如何,我希望我能解释清楚。。感谢并感谢jimjimmy1995