Margins that don't respond

Question

I have a "Read more" button on Section-e that acts weird: the margins are not responding except for left one.

GitHub Repo: https://github.com/CalogerN/Conquer

Live Preview: https://calogern.github.io/Conquer/

I tried debugging, but I found nothing.

.section-e__btn {
  align-self: flex-start;
  margin: 28px 0px 30px 20px;
  padding: 15px 30px;
  background-color: white;
  font-family: "Open Sans";
}

<div class="section-e__column1">

  <a href="#" class="section-e__btn">Read more</a>

</div>

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, Aug 02 '19 at 16:25
The problem is an `` tag is an inline element. Add `display: inline-block` to the `btn`. https://medium.com/@DaphneWatson/css-display-properties-block-inline-and-inline-block-how-to-tell-the-difference-7d3a1e6e3051 — disinfor, Aug 02 '19 at 16:25
@CalogeroNapoli I'm not sure what you mean. I gave you the answer, a reference link for more reading and a question that already has the answer for the question you asked. — disinfor, Aug 02 '19 at 16:32
@disinfor I mean you marked it as duplicate, but it wasn't my intention to duplicate anything. Thank you for your answer. — , Aug 02 '19 at 16:34
@CalogeroNapoli I know you weren't trying to duplicate anything, but the answer already exists on Stack Overflow - so the community uses flags to point users to existing questions/answers so the site doesn't get cluttered with the same type of question. It's all good, it happens. Happy coding! — disinfor, Aug 02 '19 at 16:37

score 0 · Accepted Answer · answered Aug 02 '19 at 16:26

0

Use display: block or display: inline-block to set margins on the <a> tag.

answered Aug 02 '19 at 16:26

Anurag Srivastava

14,077
4
33
43

Margins that don't respond

1 Answers1