web-dev-qa-db-fra.com

Margin-top ne fonctionne pas pour les balises <p> et <a>?

J'ai essayé d'implémenter margin-top pour un bouton de lien, mais cela ne fonctionne pas du tout. J'ai également essayé des styles en ligne pour les balises 'p' et 'a'.

Il y a 3 éléments li, je n'ai pas posté le code entier ici car c'est le même que le premier élément 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>

Voici le code CSS pour le html ci-dessus. code 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

Ce problème est connu sous le nom de Margin Collapse et se produit parfois entre les marges top et bottom sur les éléments de bloc.

Les marges des frères et sœurs adjacents sont effondrées

C'est pourquoi la marge ne fonctionne pas sur la balise p. Pour le faire fonctionner ici, une option consiste à utiliser padding-top sur la balise p.

Et sur la balise a la marge ne fonctionne pas car c'est un élément en ligne. Vous devrez peut-être modifier sa propriété display en inline-block ou block.

50
DaniP

Le <a> tag est un élément en ligne et ne peut donc pas avoir de marge supérieure ou inférieure. Mais vous pouvez résoudre ce problème en appliquant display: inline-block; à elle.

11
Lars Beck

la balise de lien <a> est des balises de bloc en ligne et cela signifie qu'il doit être sur une ligne à côté des autres éléments et doit avoir une partie parent que la partie parent détermine combien ces éléments de bloc en ligne doivent avoir une marge en haut et un bouton, il y a deux façons de le faire: convertir thème à bloquer:

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

ou simplement vous pouvez travailler avec son padding

1
Navid

Essaye ça:

#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

Vous ne pourrez pas définir de marge sur un <a> tag sans d'abord le définir sur display:block;.

Dans votre cas, vous devez faire quelque chose comme ceci:

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