Margin-top ne fonctionne pas pour & lt; p & gt; et & lt; a & gt; marque?

J'ai essayé de mettre en œuvre margin-top pour un bouton de lien mais il ne fonctionne pas du tout. J'ai aussi essayé de styles en ligne pour les deux 'p' et 'un' tag.

Il y a 3 li éléments, je n'ai pas posté tout le code ici, comme 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.
le 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;
}

source d'informationauteur Orahmax

  1. 38

    Ce problème est connu comme L'Effondrement De La Marge et se produit parfois entre top et bottom marges sur les éléments de bloc.

    Les marges de côté les frères et sœurs sont effondrés

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

    Et sur la a tag de la marge ne fonctionne pas parce que c'est un élément inline. Vous devrez peut-être modifier son display propriété inline-block ou block.

  2. 8

    La <a> balise est un élément inline et, par conséquent, ne peut pas avoir une marge haut ou bas. Mais vous pouvez résoudre ce problème en appliquant display: inline-block;.

  3. 0

    Essayez ceci:

    #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;
}
  4. 0

    Vous ne serez pas en mesure de définir une marge sur un <a> balise sans premier paramètre à display:block;.

    Dans votre cas, vous avez besoin de faire quelque chose comme ceci:

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

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

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

    ou tout simplement, vous pouvez travailler avec ses padding