Establish the appropriate height for the input field

Question

Establish the appropriate height for the input field

Having an input class as shown below:

<input type="number" class="inv_1"/>

I attempted to adjust the height using CSS:

.inv_1 {
    width: 50%;
    height: 32px;
}

Expected result: input tag with a height of 32px. Actual result: input tag with a height of 38px.

Reducing it to 26px brought it to the desired 32px height. The issue is, can I set the actual height accurately? I want the element to match the specified height in CSS, just like divs and buttons with the same class have a consistent 32px height.

If only CSS had "actual" properties. For instance: "actualheight: 32px" would render precisely that. The same principle could apply to width, text alignment, borders, padding, etc. Just imagine how convenient it would be to achieve your intended design without a struggle.

(Update: Appreciate the responses, resolved with box-sizing: border-box. Unfortunately, only one answer can be marked as accepted)

html css

Answer 1

Answer №1

Make a modification to the box model property by changing box-sizing to border-box. The inconsistency in your height is a result of the default box model being set to "content-box".

.inv_1 {
    width: 50%;
    height: 32px;
    box-sizing: border-box;
}

<input type="number" class="inv_1"/>

When using content-box, padding, borders, and content height/width are calculated separately.

On the other hand, with border-box, padding and borders are included in the height/width calculations.

Answer 2

Make a modification to the box model property by changing box-sizing to border-box. The inconsistency in your height is a result of the default box model being set to "content-box".

.inv_1 {
    width: 50%;
    height: 32px;
    box-sizing: border-box;
}

<input type="number" class="inv_1"/>

When using content-box, padding, borders, and content height/width are calculated separately.

On the other hand, with border-box, padding and borders are included in the height/width calculations.

Answer 3

Answer №2

One reason is the default border and padding settings. To fix this, you can add box-sizing: border-box; to your CSS as shown in the snippet below. Also, remember that an input is a self-closing tag and does not require a closing slash.

input {
  display: inline;
}

.inv_1 {
  width: 30%;
  height: 32px;
}

.inv_2 {
  width: 30%;
  height: 32px;
  box-sizing: border-box;
}

<input type="number" class="inv_1">
<input type="number" class="inv_2">

Answer 4

One reason is the default border and padding settings. To fix this, you can add box-sizing: border-box; to your CSS as shown in the snippet below. Also, remember that an input is a self-closing tag and does not require a closing slash.

input {
  display: inline;
}

.inv_1 {
  width: 30%;
  height: 32px;
}

.inv_2 {
  width: 30%;
  height: 32px;
  box-sizing: border-box;
}

<input type="number" class="inv_1">
<input type="number" class="inv_2">

Establish the appropriate height for the input field

Answer №1

Answer №2

Similar questions

Elevate the expanded card above the others on hover instead of displacing them downward

Ensuring Bootstrap4 columns have a minimum height within a row

Ways to insert a hyperlink within a div element

Selecting the initial and final elements in a list without utilizing pseudo-classes

Using jQuery to slide elements across the page

The jQuery datepicker fails to function properly on an HTML element that has been added via AJAX

Arranging divs for dynamic movement with window resizing

Creating formatted code blocks within my HTML document

PHP Question: Why are variables within <?php ?> not accessible within if/else statements?

What is the best way to implement data validation for various input fields using JavaScript with a single function?

Disable the clear button on input fields for Internet Explorer version 8

Is your URL getting cut off in jQuery?

Combining PHP and HTML: Utilizing nested foreach loops with interspersed HTML code

Modify current HTML code for 1027x768 displays

What could be causing my Angular JS application to malfunction?

Creating a sort button in HTML that can efficiently sort various divs within a table is a useful tool for enhancing user experience

Using jQuery AJAX, the value of a server-side control (textbox) can be easily set

Utilizing Bootstrap 4 to create fixed and fluid width side-by-side divs with scrollbars

Do not apply styling to a particular page in CSS and HTML

placeholder for selecting a file