CODEWITHSUNDEEP
htmlcss
user18065329
user18065329

Reputation:

HTML: Why input have different size?

I found out that other elements are calculating their size like this:

width = width - width_border_size * 2
height = height - height_border_size * 2

But the <input> element doesn't callculating his size.
How can i fix it? Here is my code:

.options_display {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.options_style * {
    text-align: center;
    font-size: medium;
    font-family: arial;
    padding: 0px;
    margin-bottom: 2px;
    width: 225px;
    height: 25px;
}

p {
    margin: 0px;
}

[hidden] {
    display: none;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta name="viewport" content="width=device-width">
    </head>
    <body onload="">    <!-- Disable, hide first option -->
        <div style="float: left; position: relative; left: 50%;">
            <div style="float: left; position: relative; left: -50%;">
                <div class="options_display options_style">
                    <select>
                        <option>Select test</option>
                        <option>Option 0</option>
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                    <input type="number" placeholder="Input test 0">
                    <input type="number" placeholder="Input test 1">
                    <button onclick="">Button test</button>
                    <p id="text_id">Test</p>
                </div>
            </div>
        </div>
    </body>
</html>

Edit: i tried making class special for input and calculating the height and width with the border size but the height wasnt 25 but ~24.6 i dont remember the decimal number but i think it was .6 or .4. The solution is maybe to calculate somehow the font size but i dont know how

Upvotes: 1

Views: 240

Answers (1)

Terry
Terry

Reputation: 66113

Forcing all elements to use box-sizing: border-box will fix the issue. Remember that the default value is content-box, which means whatever vendor-defined padding and border widths are added on top of the declared width and height.

This is also the reason why most people use a CSS reset: most resets will automatically set this following rule:

* {
  box-sizing: border-box;
}

See proof-of-concept below:

* {
  box-sizing: border-box;
}

.options_display {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.options_style * {
    text-align: center;
    font-size: medium;
    font-family: arial;
    padding: 0px;
    margin-bottom: 2px;
    width: 225px;
    height: 25px;
}

p {
    margin: 0px;
}

[hidden] {
    display: none;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta name="viewport" content="width=device-width">
    </head>
    <body onload="">    <!-- Disable, hide first option -->
        <div style="float: left; position: relative; left: 50%;">
            <div style="float: left; position: relative; left: -50%;">
                <div class="options_display options_style">
                    <select>
                        <option>Select test</option>
                        <option>Option 0</option>
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                    <input type="number" placeholder="Input test 0">
                    <input type="number" placeholder="Input test 1">
                    <button onclick="">Button test</button>
                    <p id="text_id">Test</p>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 2

Related Questions