Adjusting input height with CSS in Google Chrome

When I define an input element with the following CSS properties:

input {
  border: none;
  font-family: arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
  padding: 0;
}

I anticipate the height of the input to be 16px, however, upon inspecting in Chrome Developer Tools, it displays a height of 18px.

https://i.stack.imgur.com/7Tomc.png

In Firefox, on the other hand, the height remains at 16px.

What could be causing this additional 2px discrepancy in Chrome?

Fiddle: https://jsfiddle.net/fh7upk0n/

Although I understand that using 'height' would set a fixed height, I am curious about the origin of the extra 2px in Chrome.

htmlcssgoogle-chrome

Answer №1

It is recommended to utilize the height property in place of line-height

height- refers to the vertical measurement of the container

line-height- measures the distance from the top of the first line of text to the top of the second

Answer №2

It seems like Chrome may be adding 1 pixel above and below the text to improve readability.

If you want Chrome to display an input with a height of 16px, you can use the following CSS:

height: 16px;

However, it's not recommended to rely on line-height for sizing elements below it.

Answer №3

height is equal to font-size and also includes the property box-sizing: content-box;

input {
    font-size: 20px;
    height: 20px;
    line-height: 1;
    box-sizing: content-box;
    padding: 1em;
    border: 0;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular material is experiencing an issue where content is being cut off or

I am currently working on a project using AngularJS for a web application. I have encountered an issue where some of the content in the md-content element is being clipped. For instance, the body tag has the style: overflow: hidden, and the child md-conte ...

javascripthtmlcssangularjsangular-material

Securing some room beneath the table

I need some extra room below my table. <table border="0" class="medtable"> <tr> <th>User</th> <th>From</th> <th>To</th> </tr> <tr> ... </tr> ...

csshtml-table

How can you use JavaScript to create hyperlinks for every occurrence of $WORD in a text without altering the original content?

I've hit a bit of a roadblock. I'm currently working with StockTwits data and their API requires linking 'cashtags' (similar to hashtags but using $ instead of #). The input data I have is This is my amazing message with a stock $sym ...

javascripthtmlreactjs

Updating part of a page while also changing the navigation

Apologies in advance, as this is my first attempt at coding a website. I have a specific need where I want to update only one div on my web page when a link in the navigation bar is clicked. <body> <div id="wrapper"> <header id= ...

javascriptjqueryhtmlajax

Sharing HTML code from R to your Wordpress posts

I have successfully created an RMarkdown file that generates a visually appealing HTML page. You can view the output here: Now, my goal is to embed this HTML code onto our Wordpress site at: The challenge I'm facing is getting the content onto the p ...

htmlrwordpressbashr-markdown

Is there a way to have the collapsible content automatically expanded upon loading?

I came across a tutorial on w3school (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol), which demonstrates collapsible content hidden by default. The code snippet from the link is provided below. Can someone assist me in cha ...

javascripthtmlcss

Ways to extract information from a table cell located next to a table cell with colspan

As a beginner in web scraping, I am gradually making progress. However, I'm facing a tough challenge with this particular task. My goal is to extract data from the ESPN NBA boxscore website: I aim to scrape the names of players labeled as "DNP" (Did ...

pythonhtmlflaskweb-scrapingscreen-scraping

Assistance needed in keeping an image with absolute positioning CSS fixed to the top left corner of the browser

Looking for some CSS help as a beginner here! I've been trying to position a transparent PNG image over a centered table, but it seems stuck in the upper left corner of the browser. Absolute positioning should give me freedom to move it around, right? ...

csshtmlabsolute

Is there a way to programmatically toggle a button's enabled state depending on the content of a text input field?

I want to create a functionality where a button will be enabled if the value in a textbox is 'mypassword'. If it's not equal to 'mypassword', then the button should be disabled. I've attempted the code below, but it doesn&apos ...

javascripthtmljquery

Issues with Disabling the Browser's Back Button with jquery

I have been attempting to prevent the back button from functioning in a specific Browser, Microsoft Bing. Interestingly, my code works only if I click somewhere in the window first. If I don't click anywhere and try to go back directly, it still allow ...

javascripthtmljquery

What are the steps to resolve issues with URL Encoding?

Here is my website link: forumdisplay.php?462-%EE%F9%E7%F7%E9%ED-%E1%F8%F9%FA I suspect that the url is URL Encoded. I am using vbulletin 4.1.12 How can I resolve this issue? Replace 462-%EE%F9%E7%F7%E9%ED-%E1%F8%F9%FA with f=462 ...

phphtmlvbulletin

Creating a dropdown menu and adjusting the content below

Feeling stuck in one place with my code here: link The side navbar animation is almost what I want, but clicking one option opens all of them. Hoping for a similar effect like this page: link $(document).ready(function() { $('.interfejs, .proces ...

jqueryhtmlcss

Forecast the width of an element using JavaScript

Is there a way to display tab elements on a webpage without them automatically wrapping into a new row if there are too many? Instead, I would like an arrow icon to appear at the end of the tabs so users can cycle between tab groups. The challenge is that ...

javascripthtmlcss

Refresh all fields for various products with a single click of a button

Our Magento multi-vendor site allows vendors to easily manage their products. For each single product, vendors can view and update information such as price, selling price, quantity, and more from their vendor account. We have implemented a feature where ...

javascriptphphtmlmagento

Is there a problem with the way divs are being displayed when using jQuery to show the first 12 elements with the class "hide-show"?

I am encountering a problem with displaying data using the jQuery slice() and show() methods to reveal dynamically generated divs from a PHP function. The code is as follows: <style> .hide-show { display :none; } </style> <div class="c ...

javascriptphpjquerycsscodeigniter

The form submission messages that are being received are appearing blank, even when the name field is populated with an

Hey there! I'm experiencing an issue with my form. Even though I've set the name attribute to "" for all fields, the submitted data comes back blank in my email. Here's a snippet of my code: <div class="col-lg-6 ...

htmlcssemailform-submit

What is the best way to conceal a div element on a Razor Page depending on the user's input?

How can I display the state field only when the user selects United States in the country field, and hide it otherwise? Here is the code snippet from my cshtml page: <div class="form-group col-sm-4 mt-4"> <label asp-for="Form.Co ...

c#htmlcssasp.net-corerazor-pages

Avoiding the selection of HTML canvas objects

I am currently working on customizing my homepage with an interactive animation. However, I am facing some challenges in integrating it seamlessly into the page. You can view the progress at . My main issue is preventing the canvas object from being select ...

javascripthtmlcss

What are the steps to executing commands with child processes in Node.js?

I have successfully established communication between the client and server using socket.io. I am now utilizing WebSockets to send commands from the client to the server, and I would like to execute these received commands on the server. Here is my approa ...

javascripthtmlnode.jsexpresswebsocket

"Embedding social content within an iframe may result in the element being unresponsive

I have a setup where I'm utilizing social embed to include Instagram content in the footer. When I insert the provided iframe code, the layout looks correct but the content is not clickable. <iframe src="https://embedsocial.com/facebook_album ...

javascripthtmlcssiframebootstrap-4