css - 无法使用 CSS(Wordpress 主题)删除上边距

标签 css wordpress margin

我确实尝试了所有方法,但仍然无法删除页面的上边距(大约 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">

索引.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">

迈耶的重置:

/* 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;
}

样式.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 - &quot;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>&quot;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">

最佳答案

正如@YiJuang 所说。我将其作为本地测试删除,间距消失了

关于css - 无法使用 CSS(Wordpress 主题)删除上边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3827979/

相关文章:

wordpress - IE 和 Firefox 中的 SSL 不安全内容警告

html - 更改 HTML 导出到 Word 的边距

javascript - Jquery 移动底部导航栏

javascript - 交替背景图像之间的间距

php - wordpress wp_list_pages 帮助

图像和文本之间的 CSS float 边距

html - 如何使内部 img 的 margin-bottom 和外部 div 的 margin-bottom 折叠?

Jquery MultiSelect - 更改字体大小和宽度

javascript - 每次用户输入内容时如何运行脚本?

javascript - 多个复选框过滤器返回服务器错误 500