Margin-top не работает для <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>

Вот код css для вышеуказанного html. Код 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;
}

Ответ 1

Эта проблема называется Margin Collapse, которая иногда бывает между полями top и bottom на элементах блока.

Поля смежных братьев и сестер сбрасываются

По этой причине маржа не работает с тегом p. Чтобы он работал здесь, опция используется padding-top в теге p.

И в теге a поле не работает, потому что это встроенный элемент, вам может потребоваться изменить его свойство display на inline-block или block.

Ответ 2

<a/> является встроенным элементом и поэтому не может иметь верхнее или нижнее поле, но вы можете решить это, применив к нему display: inline-block;.

Ответ 3

Попробуйте следующее:

#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

Вы не сможете установить маркер в теге <a>, не устанавливая сначала display:block;.

В вашем случае вам нужно сделать что-то вроде этого:

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