无法使用 CSS 删除顶部边距（Wordpress 主题）
我确实尝试了一切，但仍然无法删除页面的上边距（大约 20 像素）。原始页面如下： http://blog.robin.idv.tw/
(如果你检查#container div，你会发现它上面有空间，但没有边距，也没有填充，显示紫色或黄色）
这是修改后的代码：
header.php：
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<META name="y_key" content="bd328389f14b8ad2" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="/r2Q/NDR8/9+u/mDq9bgYWiS+75+livyGV0i4fww3hg=" />
<title>
<?php bloginfo('name'); ?>
<?php if(is_home()) { ?>
- <?php bloginfo('description'); ?>
<?php } ?>
<?php if(is_single()) { ?>
<?php wp_title(); ?>
<?php } ?>
<?php if(is_404()) { ?>
- Page Not Found
<?php } ?>
<?php if(is_search()) { ?>
- Search Results for: <?php echo wp_specialchars($s, 1); ?>
<?php } ?>
</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script src="<?php bloginfo('template_directory'); ?>/js/tabcontent.js" type="text/javascript"></script>
<?php wp_head(); ?>
</head>
<body>
<div id="container">
<!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->
<div id="header">
index.php：
<link href='http://www.robin.idv.tw/images/favicon.ico' rel='shortcut icon'/>
<?php get_header(); ?>
<div id="column">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- ^^^^^^^^^^^^^^ post code ^^^^^^^^^^^^^^ -->
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-top"></div>
<div class="entry">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="date"><?php the_time('l, F j, Y'); ?> <?php the_time('G:i'); ?></span>
<div class="info">
<div class="cat">文章分類： <?php the_category(', ') ?></div>
<div class="comments"><?php comments_popup_link('迴響', '1 則迴響', '% 則迴響'); ?></div>
<div class="clear"></div>
</div>
<div class="content">
meyer的重置：
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
style.css ：
@import "css/reset.css";
body {
font-family: Arial, sans-serif;
background: url("images/bg.png") repeat-x scroll 0 0 #FFFFFF;
}
#container {
width: 980px;
margin: 0 auto;
overflow: hidden;
}
/* header */
#header {
width: 980px;
height: 344px;
overflow: hidden;
}
#header h1, #header h1 a {
overflow: hidden;
width: 252px;
}
#header h1 {
margin: 10px 20px 0 0;
}
#header h1 {
float: left;
overflow: hidden;
}
#header h1 a {
background: url('images/logo.png') no-repeat scroll 0 0;
float: left;
生成的html：
<link href='http://www.robin.idv.tw/images/favicon.ico' rel='shortcut icon'/>
<!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" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<META name="y_key" content="bd328389f14b8ad2" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="/r2Q/NDR8/9+u/mDq9bgYWiS+75+livyGV0i4fww3hg=" />
<title>
Sleex - "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</title>
<link rel="stylesheet" href="http://localhost/sleex/wp-content/themes/ocean-of-words/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Sleex RSS Feed" href="http://localhost/sleex/?feed=rss2" />
<link rel="pingback" href="http://localhost/sleex/xmlrpc.php" />
<script src="http://localhost/sleex/wp-content/themes/ocean-of-words/js/tabcontent.js" type="text/javascript"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/sleex/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/sleex/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Sleex' href='http://localhost/sleex' />
<meta name="generator" content="WordPress 3.0.1" />
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>
<body>
<div id="container">
<!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->
<div id="header">
<div id="logo">
<h1><a href="http://localhost/sleex/" title="Sleex">Sleex</a></h1>
</div>
<div id="pagenav">
<ul>
<li class="current_page_item"><a href="http://localhost/sleex">首頁</a></li>
<li class="page_item page-item-2"><a href="http://localhost/sleex/?page_id=2" title="About">About</a></li>
<li class="page_item page-item-4"><a href="http://localhost/sleex/?page_id=4" title="Contact">Contact</a></li>
<li class="page_item page-item-7"><a href="http://localhost/sleex/?page_id=7" title="Submit">Submit</a></li>
</ul>
</div>
<!--<div id="searchform">-->
<!--<form method="get" action="http://localhost/sleex/">-->
<!--<fieldset>-->
<!--<label>Blog Search</label>-->
<!--<input type="text" value="" name="s" id="searchinput" />-->
<!--<input type="submit" value="GO" id="searchbutton" />-->
<!--</fieldset>-->
<!--</form>-->
<!--</div>-->
<div class="description">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Join the course</a>
</div>
<div id="pic">
<img src="http://localhost/sleex/wp-content/themes/ocean-of-words/images/pic.png"/>
</div>
</div>
<div class="clear"></div>
<!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->
<div id="column">
I really tried everything but I still can't remove the top margin of a page (aproxximately 20px). Here is the original page: http://blog.robin.idv.tw/
(If you inspect the #container div you'll see it has space above but no margin nor padding which displays purple or yellow)
Here is the modified code:
header.php:
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<META name="y_key" content="bd328389f14b8ad2" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="/r2Q/NDR8/9+u/mDq9bgYWiS+75+livyGV0i4fww3hg=" />
<title>
<?php bloginfo('name'); ?>
<?php if(is_home()) { ?>
- <?php bloginfo('description'); ?>
<?php } ?>
<?php if(is_single()) { ?>
<?php wp_title(); ?>
<?php } ?>
<?php if(is_404()) { ?>
- Page Not Found
<?php } ?>
<?php if(is_search()) { ?>
- Search Results for: <?php echo wp_specialchars($s, 1); ?>
<?php } ?>
</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script src="<?php bloginfo('template_directory'); ?>/js/tabcontent.js" type="text/javascript"></script>
<?php wp_head(); ?>
</head>
<body>
<div id="container">
<!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->
<div id="header">
index.php:
<link href='http://www.robin.idv.tw/images/favicon.ico' rel='shortcut icon'/>
<?php get_header(); ?>
<div id="column">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- ^^^^^^^^^^^^^^ post code ^^^^^^^^^^^^^^ -->
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-top"></div>
<div class="entry">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="date"><?php the_time('l, F j, Y'); ?> <?php the_time('G:i'); ?></span>
<div class="info">
<div class="cat">文章分類： <?php the_category(', ') ?></div>
<div class="comments"><?php comments_popup_link('迴響', '1 則迴響', '% 則迴響'); ?></div>
<div class="clear"></div>
</div>
<div class="content">
meyer's reset:
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
style.css:
@import "css/reset.css";
body {
font-family: Arial, sans-serif;
background: url("images/bg.png") repeat-x scroll 0 0 #FFFFFF;
}
#container {
width: 980px;
margin: 0 auto;
overflow: hidden;
}
/* header */
#header {
width: 980px;
height: 344px;
overflow: hidden;
}
#header h1, #header h1 a {
overflow: hidden;
width: 252px;
}
#header h1 {
margin: 10px 20px 0 0;
}
#header h1 {
float: left;
overflow: hidden;
}
#header h1 a {
background: url('images/logo.png') no-repeat scroll 0 0;
float: left;
generated html:
<link href='http://www.robin.idv.tw/images/favicon.ico' rel='shortcut icon'/>
<!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" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<META name="y_key" content="bd328389f14b8ad2" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="/r2Q/NDR8/9+u/mDq9bgYWiS+75+livyGV0i4fww3hg=" />
<title>
Sleex - "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</title>
<link rel="stylesheet" href="http://localhost/sleex/wp-content/themes/ocean-of-words/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Sleex RSS Feed" href="http://localhost/sleex/?feed=rss2" />
<link rel="pingback" href="http://localhost/sleex/xmlrpc.php" />
<script src="http://localhost/sleex/wp-content/themes/ocean-of-words/js/tabcontent.js" type="text/javascript"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/sleex/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/sleex/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Sleex' href='http://localhost/sleex' />
<meta name="generator" content="WordPress 3.0.1" />
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>
<body>
<div id="container">
<!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->
<div id="header">
<div id="logo">
<h1><a href="http://localhost/sleex/" title="Sleex">Sleex</a></h1>
</div>
<div id="pagenav">
<ul>
<li class="current_page_item"><a href="http://localhost/sleex">首頁</a></li>
<li class="page_item page-item-2"><a href="http://localhost/sleex/?page_id=2" title="About">About</a></li>
<li class="page_item page-item-4"><a href="http://localhost/sleex/?page_id=4" title="Contact">Contact</a></li>
<li class="page_item page-item-7"><a href="http://localhost/sleex/?page_id=7" title="Submit">Submit</a></li>
</ul>
</div>
<!--<div id="searchform">-->
<!--<form method="get" action="http://localhost/sleex/">-->
<!--<fieldset>-->
<!--<label>Blog Search</label>-->
<!--<input type="text" value="" name="s" id="searchinput" />-->
<!--<input type="submit" value="GO" id="searchbutton" />-->
<!--</fieldset>-->
<!--</form>-->
<!--</div>-->
<div class="description">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Join the course</a>
</div>
<div id="pic">
<img src="http://localhost/sleex/wp-content/themes/ocean-of-words/images/pic.png"/>
</div>
</div>
<div class="clear"></div>
<!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->
<div id="column">
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
正如@YiJuang 所说。我将其作为本地测试删除，间距消失了
as @YiJuang said. I removed it as a local test and the spacing went away