CODEWITHSUNDEEP
cssbuttoninputhyperlink
user8380631
user8380631

Reputation:

Have the same height for a link, button and input

I would like to have the same style for my buttons, links and inputs. I am having a problem with the height and I can not identify the cause.

In this example, my button and my input is 30 pixels high but my link only has 29 pixels.

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 2rem;
}

button, input, a {
  background: none;
  border: 1px solid grey;
  color: black;
  font-size: 1.6rem;
  outline: none;
  padding: 5px;
  text-decoration: none;
}
<button>Hello</button>
<input type="text" placeholder="Hello" />
<a href="#">Hello</a>

What is this difference?

Upvotes: 2

Views: 2000

Answers (1)

Pete
Pete

Reputation: 58422

You need to make sure your font-family is the same for all elements (currently your anchor has a different font) and also make sure your elements are block or inline block, otherwise the padding isn't applied:

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 2rem;
}

button,
input,
a {
  display: inline-block;
  font-family: arial;
  background: none;
  border: 1px solid grey;
  color: black;
  font-size: 1.6rem;
  outline: none;
  padding: 5px;
  text-decoration: none;
}
<button>Hello</button>
<input type="text" placeholder="Hello" />
<a href="#">Hello</a>

Upvotes: 1

Related Questions