From the course: HTML & CSS: Creating Forms

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Box sizing for forms

Box sizing for forms - HTML Tutorial

From the course: HTML & CSS: Creating Forms

Start my 1-month free trial

Box sizing for forms

“

- [Instructor] The default widths for various input types can be slightly different, in this video, we'll see how to give them a consistent width. First, here are all the different input types. We haven't styled them yet, you can see that they're actually all different widths. Even if I give them a width, they're not quite even. The only ones that are actually 150 pixels wide are the search and the select, the others are actually a little bit more than a 150 pixels. But when you're styling a page, you're probably going to want everything to be a consistent width just to make it look good. So you can do that using a CSS property called, box sizing. Box sizing changes the way the browser interprets the box model, the box model, basically describes how padding and margins are rendered around an element. The default box sizing is content box. That's the first box you see here, so, what happens here, this paragraph that you see, is 600 pixels and there's 50 pixels of padding. By using box…

Contents