[CSS] It is convenient to use box-sizing to align the size of the form's text area, text box, pull-down box, etc.

Even if you specify the width of each part of the form, such as the text area, text box, pull-down box, etc., using CSS, the display will not align properly depending on the browser, and it will not be displayed properly...

I finally solved what I was feeling, so here's a memo.

Width alone is not enough

For now, here's a sample.

<style type="text/css"> .sample1_1{ width:250px; margin:10px 0px 10px 0px; } .sample1_2{ width:250px; height:100px; resize:none; margin:10px 0px 10px 0px; } </style><form><select name="" class="sample1_1"><option value="" selected>hyde</option><option value=""> ken</option><option value=""> tetsuya</option><option value=""> yukihiro </option></select><br><input type="text" name="" class="sample1_1"><br><textarea name="" class="sample1_2"></textarea></form>

Even if you specify the same size for each element, the display may not be aligned depending on the browser.
I'm especially concerned about the difference in width.

Write box-sizing:border-box; along with width and height

In this case, along with the width and height of each element,

box-sizing:border-box;

It works fine if you specify .

<style type="text/css"> .sample2_1{ width:250px; box-sizing:border-box; margin:10px 0px 10px 0px; } .sample2_2{ width:250px; height:100px; box-sizing:border-box; resize:none; margin:10px 0px 10px 0px; } </style><form><select name="" class="sample2_1"><option value="" selected>hyde</option><option value=""> ken</option><option value=""> tetsuya</option><option value=""> yukihiro </option></select><br><input type="text" name="" class="sample2_1"><br><textarea name="" class="sample2_2"></textarea></form>

What is the box-sizing property?

The box-sizing property is a property used to specify how to calculate the box size (width, height).

Possible values ​​are:

• content-box: Do not include padding and border widths in element width and height. Default value.
• border-box: Include the padding and border widths in the element's width and height.

It's like that.

Afterword

After using it, I found out that it is extremely convenient.

You may consider using box-sizing: border-box; as the default value.