CODEWITHSUNDEEP
htmlcss
gespinha
gespinha

Reputation: 8487

Button display inline CSS

I have the following CSS and HTML: http://jsfiddle.net/47w0h73r/6/

.one {
  padding: 20px;
  background: #f00;
}
.two {
  padding: 20px;
  background: #00f;
}
a,
button {
  font-family: Arial, Helvetica;
  font-size: 16px;
  padding: 10px;
  background: #fff;
  color: #000;
  display: inline;
  border: 0;
  text-decoration: none;
}
<div class="one"></div>
<div class="two">
  <a href="#">Link</a>
  <button>Button</button>
</div>

As you will notice, the button doesn't appear as inline. Why is this? How can I make this button inline, just like its sibling a?

Issue

By changing the button to an a you will notice that the display: inline makes the padding of the parent element to ignore the padding of both child elements, making them really display inline. The problem, is that the button tag doesn't really appear inline, which makes the parent element's padding push both elements down. How can I fix this?

Upvotes: 6

Views: 33503

Answers (2)

Nerdroid
Nerdroid

Reputation: 13966

Add line-height:17px; to a, button and that should make them the same:

.one {
  padding: 20px;
  background: #f00;
}
.two {
  padding: 20px;
  background: #00f;
}
a,
button {
  font-family: Arial, Helvetica;
  font-size: 16px;
  padding: 10px;
  background: #fff;
  color: #000;
  display: inline;
  border: 0;
  text-decoration: none;
  line-height: 17px;
}
<div class="one"></div>
<div class="two">
  <a href="#">Link</a>
  <button>Button</button>
</div>

Upvotes: 3

Alohci
Alohci

Reputation: 82986

Trying to set a button to display:inline seems to cause some confusion. The inability to get display:inline behaviour is often attributed to it being a replaced element, but that is incorrect. <button> is not a replaced element.

In fact, the HTML5 specification, Section 10.5.2 The button element makes this requirement:

When the button binding applies to a button element, the element is expected to render as an 'inline-block' box rendered as a button whose contents are the contents of the element.

The language is a little unusual, but the button binding does apply, and the effect is that the binding takes precedence over the specified value of the display property. The effect is that the button is always rendered as display:inline-block, no matter what its specified value is. There is nothing you can do about it.

Upvotes: 24

Related Questions