CODEWITHSUNDEEP
htmlcss
Tudor Apostol
Tudor Apostol

Reputation: 131

Input height slightly bigger than link

Consider the following example

https://jsfiddle.net/gq5bru8d/1/

 

* {
  box-sizing: border-box; }

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem; }

a {
  text-decoration: none; }

  
<input type="text" placeholder="Input">
<a href="#">Anchor</a>

Although both input and anchor tag have the same font-size, line-height, padding and border, the input seems to be 1px bigger in height than the anchor tag. Why is that and how can you make it so they both have equal dimensions ?

Upvotes: 0

Views: 348

Answers (8)

Jayx
Jayx

Reputation: 3966

There are a few reasons for this:

  1. You're not using the same font for both, hence all the relative units are interpreted/calculated to a different value.
  2. The input still has a different inner height, which messes with the overall height and, ultimately, the alignment.

 

* {
  box-sizing: border-box;
}

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  /* Remove the top and bottom padding and replace with line height */
  padding: 0 1rem;
  line-height: 3rem;
  /* Set both elements' display property to be inline-block */
  display: inline-block;
  font-size: 1rem;
  /* Fix the font family */
  font-family: Arial, sans-serif;
  /* Fix the line height */
  line-height: 3rem;
  /* Set the vertical alignment for both elements */
  vertical-align: center;
}

a {
  text-decoration: none;
}

  
<input type="text" placeholder="Input">
<a href="#">Anchor</a>

Upvotes: 1

Mohammed Insaf M
Mohammed Insaf M

Reputation: 17

Check font family of both input and anchor tag. Input has some font-style property in your example by default.

Change %example to :

%example {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  font-family: Arial;
}

Here, I only extra added font-family: Arial; to css.

Upvotes: 0

Sravya Nagumalli
Sravya Nagumalli

Reputation: 748

try using this...

* {
  box-sizing: border-box; }

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
 font: 400 14.3333px Arial;
  line-height: 1rem; }

a {
  text-decoration: none; }

Upvotes: 0

Hanif
Hanif

Reputation: 3797

To best way to set both element height explicitly and make change the like following:

%example {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  height: 50px; // Keyline
  display: inline-block; // without this line height not apply properly
  vertical-align: top; // This line making alignment perfectly
}

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13407

Wrap them in a flex div.

 

* {
  box-sizing: border-box; }

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem; }

a {
  text-decoration: none;
  margin-left: 5px;
 }

  
<div style="display: flex;">
<input type="text" placeholder="Input">
<a href="#">Anchor</a>
</div>

Another solution. Add this style to both elements font: 13.3333px Arial

 

* {
  box-sizing: border-box; }

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  font: 13.3333px Arial;

 }

a {
  text-decoration: none;
  margin-left: 5px;
 }

  
<input type="text" placeholder="Input">
<a href="#">Anchor</a>

Upvotes: 3

Naomi
Naomi

Reputation: 1298

If you don't mind using flex by using a wrapper around the input and anchor and set is as

display:flex

it will make them the same height.

* {
  box-sizing: border-box; }
  
  .wrapper{display:flex}

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem; }

a {
  text-decoration: none;
  margin-left: 5px;
 }
  
<div class="wrapper">
<input type="text" placeholder="Input">
<a href="#">Anchor</a>
</div>

Upvotes: 1

Gautam Naik
Gautam Naik

Reputation: 9348

Add this to ur a and input tag

  display: inline-block;
  vertical-align: middle;


* {
  box-sizing: border-box;
}

input,
a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  display: inline-block;
  vertical-align: middle;
}

a {
  text-decoration: none;
}
<input type="text" placeholder="Input">
<a href="#">Anchor</a>

Upvotes: 0

Scoots
Scoots

Reputation: 3102

This is happening because your a is still inline. Setting it to display as inline-block allows the line-height property to shine through. You're also going to want to make sure they're both on the same vertical-align:

* {
  box-sizing: border-box;
}

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  vertical-align: top;
}

a {
  display: inline-block;
  text-decoration: none;
}
<input type="text" placeholder="Input">
<a href="#">Anchor</a>

Upvotes: -1

Related Questions