Question

我希望流行的摘录是保证金的底部：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;
}

我不能得到保证金底部将无法正常工作

1 个答案: