input element height larger than font size

Question

I have an input element that has a height that is 2px greater than expected.

Below is the css

.input {
  font-size: 16px;
  padding: 15px;
  border: 1px solid black;
  border-radius: 3px;
  width: 400px;
}

<input class="input">

I would have expected the content height of the input to be 16px due to the font size. For some reason Chrome says my content box is 18px rather than 16px. I even tried to set line-height: 1 but did not work. Can someone explain this? I'd rather not hard code the height as a solution.

probably due to 1px border. Considering both up and down sides, it adds additional 2px to height — Thamindu DJ, Jul 26 '20 at 06:13
Do you have `box-sizing: border-box;` set on all your HTML elements via CSS? — Robert Cooper, Jul 26 '20 at 06:22
Thanks for answering. This issue is not about the total heigh.. it's very explicitly about the content box height of the input element. — alaboudi, Jul 26 '20 at 14:43
https://stackoverflow.com/questions/28363186/inline-elements-and-line-height — epascarello, Jul 28 '20 at 01:38

score 2 · Accepted Answer · answered Jul 26 '20 at 06:38

2

You can set box-sizing: content-box and set height: 16px

.input {
  font-size: 16px;
  padding: 15px;
  border: 1px solid black;
  border-radius: 3px;
  width: 400px;
  box-sizing: content-box;
  height: 16px;
}

<input class="input">

answered Jul 26 '20 at 06:38

Mahdi Aslami Khavari

1,755
15
23

That definitely is a great answer but can you explain why the content box height is 18px when no explicit height is applied – alaboudi Jul 26 '20 at 14:40
@alaboudi As i know it's because of browser renderer engine and it's height is different in other browsers. https://stackoverflow.com/questions/26426856/html-is-input-box-default-calculated-content-height-different-across-browsers – Mahdi Aslami Khavari Jul 27 '20 at 06:37
Thank you for your answer. I'll also add this link from the comment on the question. It also refers to a solution from another StackOverflow question https://stackoverflow.com/questions/28363186/inline-elements-and-line-height – alaboudi Jul 29 '20 at 16:49

score 0 · Answer 2 · answered Jul 26 '20 at 06:23

0

It says this because of 1px border but to resolve this add box-sizing: border-box; to it.

It will surely solve your issue but if it doesn't let me know in the comments, I will try my best to help you.

answered Jul 26 '20 at 06:23

s1834

433
2
8

@MahdyAslamy Can you please your html code also, It will help me to assist you better. – s1834 Jul 26 '20 at 06:28
My issue is not about the entire input height, it's the content box height. I just want to understand this behavior – alaboudi Jul 26 '20 at 13:28
@alaboudi It's because the width of the content you have written is `400px` and the height is `18px` because of `1px` border on both top and bottom. To resolve it add `box-sizing: border-box;` to include **border** and **padding** in **width** and **height**. If it isn't your solution I am really sorry but I can't understand your problem and want you to do me a favour that as soon as you resolve it please let me know I would love to know how you resolved it. And I am sorry for late reply. – s1834 Jul 27 '20 at 20:44
You still have not understood the question. the CONTENT BOX height (not the element height) is 18px. Content height does not include border, padding, nor margins. Please take a look at the image pasted on the question for reference – alaboudi Jul 28 '20 at 01:36
@alaboudi I am really sorry but I can't understand the question but please let me know when you resolve your issue, I will check up on you in a couple of days to know whether you resolved it or not. Once again sorry for not able to assist you. – s1834 Jul 29 '20 at 15:32
Thanks for taking the time to answer this. I'm going to mark the other answer is the one im after. https://www.w3schools.com/css/css_boxmodel.asp refer to this image to understand what I mean by content height – alaboudi Jul 29 '20 at 16:51
@alaboudi thanks for making me understand your issue and how to solve it and can you do me a favour that if I was able to help you even a bit please upvote my answer, it means a lot to me. – s1834 Jul 29 '20 at 20:43

input element height larger than font size

2 Answers2