web-dev-qa-db-ja.com

<p>および<a>タグでマージントップが機能しませんか？

リンクボタンにmargin-topを実装しようとしましたが、まったく機能しません。また、「p」タグと「a」タグの両方でインラインスタイルを試しました。

3つのli要素があります。最初のli要素と同じなので、ここにはコード全体を掲載していません。

HTML

<div id="services">
    <ul>
        <li>
            <img src="images/service.png" alt=""/>
            <p class="service-heading">Service 1</p>
            <p>Amet nisi porttitor enim parturient, cras! Odio pulvinar a cras? Sit sociis. Augue tempor mid rhoncus nec nisi ac pulvinar dictumst</p>
            <p><a href="#">Read More</a></p> 
        </li>
    </ul>
</div>

上記のHTMLのCSSコードを次に示します。 CSSコード：

#services{
    background-color: #afc1ff;
    height: 490px;
    padding: 5%;
    border-top: 5px solid #4972ff;
    border-bottom: 5px solid #4972ff;
}
 #services ul{
/*  background-color: red; */
    margin: 0;
    padding-left: 10px;
    padding: 0 0 0 50px;
}
#services ul li{
    display: inline-block;
    width: 22%;
    padding: 1%;
    margin: 0 4% 0 4%;
    color: #4c4c4c;
    font-size: 14px; font-size: 1.4rem;
    text-align: center;
} 
.service-heading{
    font-size: 18px; font-size: 1.8rem;
}
#services ul li a{
    background-color: #4972ff;
    color: #fff;
    border-bottom: 3px solid #779bff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 8px;
    margin-top: 10px;
}
htmlcssmargin
22
Orahmax

この問題は Margin Collapse として知られており、ブロック要素のtopとbottomのマージンの間に時々発生します。

隣接する兄弟の余白が折りたたまれています

そのため、pタグでマージンが機能しません。ここで機能させるには、pタグでpadding-topを使用するオプションがあります。

aタグでは、マージンはインライン要素であるため機能しません。 displayプロパティをinline-blockまたはblockに変更する必要がある場合があります。

50
DaniP

<a>タグはインライン要素であるため、上マージンまたは下マージンを持つことはできません。ただし、display: inline-block;を適用することでこれを解決できます。

11
Lars Beck

リンクタグ<a>はインラインブロックタグであり、他の要素の横に1行である必要があり、これらのインラインブロック要素がマージン上部とボタンをどれだけ持つかを親パーツが決定する親パーツを持っている必要があることを意味します。ブロックするテーマ：

#services a{
display: block;
margin-top: 8px;
}

または、単にpaddingで作業できます

1
Navid

これを試して：

#services ul li a{
    background-color: #4972ff;
    color: #fff;
    border-bottom: 3px solid #779bff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 8px;
    position: relative;
    top: 10px;
}
0
luke

最初に<a>に設定しない限り、display:block;タグにマージンを設定することはできません。

あなたの場合、次のようなことをする必要があります。

#services ul li p {
padding: 8px;
margin-top: 10px;}
0
wickywills