CODEWITHSUNDEEP
htmlcss
URL87
URL87

Reputation: 11012

Remove right margin on last inline element

I have a footer div with inner span buttons.

Each button have margin-right: 20px and the .footer element has padding: 0 13px.

I want to prevent the margin-right of the most right button by setting negative margin-right to its parent.

How could I get it with margin-right?

.footer {
  border: 2px solid blue;
  padding: 0 13px;
  width: 120px;
  text-align: right;
  background-color: yellow;
}

.btn {
  border: 1px solid black;
  margin-right: 20px;
  background-color: red;
}
<div class="footer">
  <span class="btn">Btn1</span>
  <span class="btn">Btn2</span>
</div>

I am not looking for a solution with the last child CSS pseudo-class.

Upvotes: 1

Views: 133

Answers (1)

web-tiki
web-tiki

Reputation: 103780

You need to add another container child of .footer and apply a negative margin-right to that element. This approach is also described here:

.footer {
  border: 2px solid blue;
  padding: 0 13px;
  text-align: right;
  background-color: yellow;
  overflow:hidden;
}
.footer > div {
  margin-right:-33px;
  }

.btn {
  border: 1px solid black;
  margin-right: 20px;
  background-color: red;
}
<div class="footer">
  <div>
    <span class="btn">Btn1</span>
    <span class="btn">Btn2</span>
  </div>
</div>

Note you also need to a d overflow:hidden; to the .footer element to prevent horizontal scrollbar.

Upvotes: 2

Related Questions