我无法获得 margin-bottom 将无法工作

Question

我希望 popular-excerpt 为 margin-bottom:20px 但这行不通。我已经尝试同时执行 margin-bottom 和 padding-bottom 但它们都不起作用。

这是我的代码

a.popular-excerpt {
    text-decoration: none;
    color: #000000;
  margin-bottom: 20px;
}

<div id="slider"> 
<?php 
$carousel_cat = get_theme_mod('carousel_setting','1'); 
$carousel_count = get_theme_mod('count_setting','4'); 
$month = date('m'); 
$year = date('Y'); 
$new_query = new WP_Query( array('posts_per_page' => $carousel_count, 'meta_key' => 'wpb_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC','monthnum'=>$month,'year'=>$year )); 
?> 
<?php if ( $new_query->have_posts() ) : ?> 
<?php while ( $new_query->have_posts() ) : $new_query->the_post(); ?> 
<div class="item"> 
    <?php the_post_thumbnail('popular-posts'); ?>
    <h2><a class="popular-category" 
        <?php 
        $categories = get_the_category(); 
        $separator = ", ";
        $output = '';
        
        if ($categories) {
            foreach ($categories as $category) {
                $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
            }
            echo trim($output, $separator);
        }
        
        ?></a></h2>
 <p>
     <a class="popular-excerpt" href="<?php the_permalink(); ?>"><?php echo get_the_excerpt(); ?></a>
                </p>
</div> 
<?php endwhile; wp_reset_postdata(); ?> 
<?php else : ?> 
<p><?php _e( 'Sorry, No Popular Posts Found ' ); ?></p> 
<?php endif; ?> 
</div>

Answer 1

您的 <a> 元素是内联元素，上下边距不影响内联元素。您应该将其 display 设置为 block 或 inline-block.

a.popular-excerpt {
    text-decoration: none;
    color: #000000;
    margin-bottom: 20px;
    display:block;
}

我无法获得 margin-bottom 将无法工作

i can't get margin-bottom won't work

margin

margins