Margin-bottom of h1 not working

Question

The margin-bottom style is not working for <h1> tag as seen in the following image. The margin between heading and anchor tag buttons is not the same as specified for <h1>. What is the reason for the same?

Code:

<div>
  <p>Hellos!</p>
  <h1>I'm Evans Gene<br>What's Up!</h1>
  <a href="../file1" type="application/pdf" role="button" class="pBtn">About me</a>
  <a href="../file2" type="application/pdf" role="button" class="pBtn">See Profile</a>
</div>


.pBtn {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  font-weight: 400;
  margin: 20px 10px 0px 0px !important;
  padding: 10px;
  text-decoration: none;
}

How are the buttons styled? Can you provide that CSS as well? — UncaughtTypeError, Jan 03 '18 at 20:25
While `` elements have a `type` attribute, its purpose is to indicate the likely content type of the linked resource: e.g. `About me`. It's not for describing how a link should look. Use the `class` attribute instead. — Alohci, Jan 03 '18 at 23:25
Although I voted to close the question based on the lack of reproducibility before you added the CSS, the duplicate is wrong. This is not a collapsing margin issue. The issue is the way that the heights and line-heights of inline elements is calculated means that the top margin, padding and border do not push the a elements down to avoid the bottom margin of the h1 element. You can fix it by adding `.pBtn { display:inline-block; }` to the CSS. — Alohci, Jan 04 '18 at 12:34

Sahil Babbar · Accepted Answer · 2018-01-04T16:11:06.813

0

The issue is the following:

Anchor tags can be used as buttons but <a> is different than <button>. And here, the orange highlighter depicting the margins of the <h1> sticks to the top of the text in <a>, instead of its top border, because it has border around it to make it look like a button, but semantically it is not a button.

To show the difference, just changing the <a> to <button> will shift downwards due to <margin-bottom> of <h1>.

Edit: From the comment of UncaughtTypeError User.

The issue is actually with the display type properties of the buttons in question, by default anchor tag elements (a) are computed as display: inline, this should be updated to display: inline-block to attribute block type properties to the elements (like margin values).

edited Jan 04 '18 at 16:11

answered Jan 04 '18 at 12:03

Sahil Babbar

579
1
7
21

2

The issue is actually with the `display` type properties of the buttons in question, by default anchor tag elements (`a`) are computed as `display: inline`, this should be updated to `display: inline-block` to attribute *block* type properties to the elements (like `margin` values). – UncaughtTypeError Jan 04 '18 at 12:22
@UncaughtTypeError you are absolutely right. But why is it that anchor tag elements are `display: inline` by default? Are there any reasons to it or is it by convention only? – Sahil Babbar Jan 04 '18 at 15:34
The inherit display type of any element is wholly dependent on that given element's specific purpose, and the function it is intended to fulfill - so in the case of anchor tags, being elements typically wrapped around text nodes and contained within other elements, it is attributed the display type of `inline`. – UncaughtTypeError Jan 04 '18 at 15:45
1

Refer to the following to view a list of *inline* elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#Elements **and** to the following for a list of *block-level* elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements – UncaughtTypeError Jan 04 '18 at 15:47
The list of block level elements is wrong in several places. None of canvas, output, tfoot or video are block level elements by default. – Alohci Jan 05 '18 at 11:48

Margin-bottom of h1 not working

1 Answers1