html - style - ¿Margin-top no funciona para las etiquetas<p> y<a>?

title html attribute

Question

He estado intentando implementar un margen superior para un botón de enlace pero no funciona en absoluto. También he intentado estilos en línea para ambas etiquetas ''p'' y ''a''.

Hay 3 elementos li, no he publicado el código completo aquí ya que es el mismo que el primer elemento 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>

Aquí está el código css para el html anterior. código 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;
}

Answer 1

Este problema se conoce como colapso de márgenes y ocurre a veces entre top márgenes top e bottom de los elementos de bloque.

Los márgenes de los hermanos adyacentes están colapsados.

Es por eso que el margen no funciona en la etiqueta p . Para que funcione aquí, una opción es usar padding-top en la etiqueta p.

Y en la etiqueta a, el margen no funciona porque es un elemento en línea. Es posible que deba cambiar su propiedad de display a inline-block en inline-block o block .

Answer 2

La etiqueta <a> es un elemento en línea y, por lo tanto, no puede tener un margen superior o inferior. Pero puede resolver esto aplicando display: inline-block; lo.

Answer 3

No podrá establecer un margen en una etiqueta <a> sin primero configurarlo para que display:block; .

En tu caso, necesitas hacer algo como esto:

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

Answer 4

Prueba esto:

#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;
}

Answer 5

la etiqueta de enlace <a> es etiquetas de bloque en línea y significa que debe estar en una línea al lado de otros elementos y debe tener una parte primaria, en la que la parte primaria determina cuánto deben tener estos elementos de bloque en línea en la parte superior y el botón. hacer eso: convertir tema en bloque:

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

O simplemente puedes trabajar con su padding