CSS - 为什么边框不起作用？

Question

我目前正在编写一个 Wordpress 网站。我的博客文章有侧边栏和主体。侧边栏当前具有以下属性:

.nav{
width:25%;
height: 100%;
background: #FFF;
display:block;
float:left;
position:relative;
border-right:thin solid #C8C8C8;
}

和博客文章的主体:

body {
font-family: Myriad Pro, Tahoma, arial, helvetica, sans-serif;
font-size:16px;
margin-left:20%;
margin-right:20%;
}

.post {
padding-left:10px;  
border-left:thin solid #000000;
}

我目前正在尝试将 padding-left 添加到 .post，以便在侧边栏的右边框和博客文章之间有一个间隙。但是，出于某种原因，这不起作用(不会产生间隙)。 border-left 也不是(没有创建边框；我尝试删除侧边栏上的 border-right 属性)。

目前这是 index.php 的代码

   <div id="blog">
    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
    <div class = "sidebar">    
        <?php get_sidebar(); ?>
    </div>
    <div class="post">
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <div class="entry">
            <?php the_post_thumbnail(); ?>
            <?php the_content(); ?>

            <p class="postmetadata">
            <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
            <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
            </p>

        </div>
    </div>

我如何为主要博客文章设置 padding-left 和 border-left？

谢谢!

Answer 1

内边距应用在元素内，因此边框位于内边距的另一 侧。你需要的是 margin，它应用在元素之外:

.post {
    margin-left:10px;  
    border-left:thin solid #000000;
}

Here is an article更详细地解释填充和边距。