Margin-Bottom for <A> Link Elements

Margin-bottom for a link elements

You need to add display: inline-block; to your anchor selector. Anchors are by definition inline elements and do not accept width, height, margin etc until they are defined as block level or inline-block elements.

Margin-bottom does not create space below an a tag

It'd be better practice to wrap the link in a paragraph <p> tag. Then add the margin to that.

<p><a href="#">...</a></p>

And the css:

p {
    margin-bottom: 10px;
}

The element needs to be block level to achieve the vertical spacing. Alternatively, you could force block on the a with display: block

Margin-top not working for p and a tag?

This issue is known as Margin Collapse and happens sometimes between top and bottom margins on block elements.

The margins of adjacent siblings are collapsed

That's why the margin doesn't work on the p tag. To make it work here an option is to use padding-top on the p tag.

And on the a tag the margin doesn't work because it's an inline element. You may need to change its display property to inline-block or block.

Margin for bottom border

You can use pseudo-element and then you can change size of border

.margin-check {  display: inline-block;  position: relative;}
.margin-check:after {  position: absolute;  content: '';  border-bottom: 1px solid #d2d7da;  width: 70%;  transform: translateX(-50%);  bottom: -15px;  left: 50%;}

<div class="margin-check">  Something I am typing for checking the border margin</div>

Can I set the margin-bottom property of an element to = dynamic height of a sibling?

You can still use position: sticky on the footer to do this. If you want to do this pure CSS than it's very difficult to use position: fixed because it's outside the normal document flow so it has no idea about the elements inside the document flow, but position: sticky does.

Using bottom: 0 to put it at the bottom of the page and the z-index: 0 to have it underneath the main content.

It's just the reverse of a sticky header that is on top of the page.

footer {
  background: #000;
  width: 100%;
  position: sticky;
  display: inline-block;
  bottom: 0;
  left: 0;
  height: auto;
  z-index: 0;
}

Edited JSFiddle: https://jsfiddle.net/g7a8b51z/1/

margin-bottom doesn't work in this case

Inline elements can't have margins.

If you need to add to link margin, you need to make this link block, or inline-block. You need the inline-block here.

a {display: inline-block}

When you set there block, margin will be apllied and link width will be 100% (or better, 100% - side margins - paddings - borders).

Note: you set display: inline, which do nothing in this case. Links are inline by default.

Why can't I add top margin to my a tag when I am using bootstrap?

Because by default, links are inline elements and inline elements don't have top/bottom margins. Change the link to an inline-block element instead.

.navbar-landing a{
    text-decoration: none;
    margin-top:30px;
    margin-left:60px;
    color:#ffffff;
    font-size: 20px;
    font-family: "Open Sans";
    display:inline-block;
}

bootply example

(and here's a bonus link to the spec if you're interested, "vertical margins will not have any effect on non-replaced inline elements.")

---

Related Topics