Question

在this page，.snippet-action a的填充超出了.snippet-action的顶部。

我需要做哪些更改.snippet-action a在.snippet-action顶部开始填充？

帮助表示赞赏。

<style>
.snippet {
    background-color: #FFD000;
    padding-bottom: 8px;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    width: 48%;
    margin-left: 2%;
    float: left;
}
.snippet-image {z-index: 998;}
.snippet-image img {width: 100%; height: auto; z-index: 998;}
.snippet-text {
    width: 94%;
    margin: -42px 3% 0 3%;
    padding: 3%;
    background-color: #FFF;
    padding-bottom: 40px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    z-index: 999;
    position: relative;
}
.snippet-action {
    background-color: #FFD000;
    padding-left: 3%; margin-top: -38px; 
    height: 38px;
    max-width: 168px;
    border-top-right-radius: 8px;
    -moz-border-top-right-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    z-index: 1000;
    position: relative;
    bottom: 0;
}
.snippet-action a {
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    color: #291B65;
    padding: 18px 0 8px 3%; 
}
</style>

<div class="one-third">
    <div class="snippet">
        <div class="snippet-image">
            <img src="http://vmpersonal.com/wp-content/uploads/2017/02/product-personalized-consultation.jpg" />
        </div>
        <div class="snippet-text">
            <h3>Personalized Consultation</h3>
            <p>The Personalised Fitness Consultation is a premium service. The client has the opportunity to have a face-to-face conversation with Victor (VM Personal CEO), in order to develop the best... strategy towards taking your fitness to the next level.</p>
        </div>
        <div class="snippet-action">
            <a href="#">Learn More</a>
        </div>        
    </div>
</div>

Answer 1

将display: inline-block;添加到.snippet-action a。默认情况下，a元素是inline元素，而inline元素在页面上没有垂直布局。要使元素具有垂直布局，请使用inline-block或将其更改为块级元素。

＆＃13;

.snippet {
    background-color: #FFD000;
    padding-bottom: 8px;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    width: 48%;
    margin-left: 2%;
    float: left;
}
.snippet-image {z-index: 998;}
.snippet-image img {width: 100%; height: auto; z-index: 998;}
.snippet-text {
    width: 94%;
    margin: -42px 3% 0 3%;
    padding: 3%;
    background-color: #FFF;
    padding-bottom: 40px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    z-index: 999;
    position: relative;
}
.snippet-action {
    background-color: #FFD000;
    padding-left: 3%; margin-top: -38px; 
    height: 38px;
    max-width: 168px;
    border-top-right-radius: 8px;
    -moz-border-top-right-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    z-index: 1000;
    position: relative;
    bottom: 0;
}
.snippet-action a {
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    color: #291B65;
    padding: 18px 0 8px 3%; 
    display: inline-block;
}

＆＃13;

<div class="one-third">
    <div class="snippet">
        <div class="snippet-image">
            <img src="http://vmpersonal.com/wp-content/uploads/2017/02/product-personalized-consultation.jpg" />
        </div>
        <div class="snippet-text">
            <h3>Personalized Consultation</h3>
            <p>The Personalised Fitness Consultation is a premium service. The client has the opportunity to have a face-to-face conversation with Victor (VM Personal CEO), in order to develop the best... strategy towards taking your fitness to the next level.</p>
        </div>
        <div class="snippet-action">
            <a href="#">Learn More</a>
        </div>        
    </div>
</div>

＆＃13;

Answer 2

添加display:inline-block和padding-left以及padding-right

 .snippet-action {
        background-color: #FFD000;
        margin-top: -38px;
        height: 38px;
        padding-left: 8px;
        padding-right: 8px;
        display: inline-block;
        line-height: 45px;
        max-width: 168px;
        border-top-right-radius: 8px;
        -moz-border-top-right-radius: 8px;
        -webkit-border-top-right-radius: 8px;
        z-index: 1000;
        position: relative;
        bottom: 0;
    }

CSS：div填充不是从父容器的顶部开始的

2 个答案: