Как настроить расстояние между <a> и<p>

Question

Я пытаюсь понять, как лучше настроить пространство между ними <a> элементы и <p> элементы.

Вот CodePen, который я сделал для этого: http://codepen.io/theclarkofben/pen/jEVWgz

Я смотрю специально только для регулировки расстояния между красным и синим текстом. Я не хочу регулировать пространство после синего текста абзаца или перед красным текстом гиперссылки.

До сих пор я играл с line-height - Однако, это скорректированное пространство после синего цвета, поэтому не было уместно.

Я также играл с -webkit-margin-before-webkit-margin-after но принципиально я ищу что-то совместимое с браузером.

Спасибо за ваше время и помощь.

Answer 1

Положил margin-top: 0;, margin-bottom:0; а также padding-top:0;padding-bottom:0; селекторам a,p

Вы можете отрегулировать пространство, регулируя эти значения.

a {
  color:red;
  text-decoration:none;
}
p {
  color:blue;
  
}
a, p{
  padding-top:0;   /* Here is the code I added */
  padding-bottom:0;
  margin-top: 0;
  margin-bottom:0;
}

<h3>Blog Articles</h3>
        <a href="http://blog.hubspot.com/blog/tabid/6307/bid/6126/The-Ultimate-Glossary-120-Social-Media-Marketing-Terms-Explained.aspx">The Ultimate Social Media Glossary</a>
        <p>Found this and had to share</p>
        <h4>Influencer Outreach And Management - 5 Easy Tips</h4>
        <ul>
            <li>Looking for influencers shouldn’t be hard - find the ones that like you already</li>
            <li>Communicate openly, honestly, and frequently with your influencers</li>
            <li>Know their worth and treat them with respect</li>
            <li>Give some creative freedom - people believe people, not advertising</li>
            <li>Finally and very important - don’t leave them hanging. If you run a campaign with influencers, make sure you keep in touch afterwards and nurture the relationship.</li>
        </ul>