An Introduction to Styling HTML Forms

2.4 Working With the Box Model

Welcome back to the course. In this lesson, you're gonna learn how to properly use the box model properties which are with height margin, padding and border, in order to style from controls. So, let's begin. I have a simple example set up here in code pen. Just the usual stuff. We have some inputs, radio button checkboxes, a text area, a select and some buttons. And let's actually kick this off with the label. Now let's set a display to block. And this will basically force the inputs to go on the next line. I'm doing this for clarity purposes. Now, let's go ahead and select some of these elements, and see what kind of properties we can apply to them. So, I'm gonna select input, text area and button, and that should be it. Lets also do a select there. So lets start with width. Lets set a with a 400 pixels for example. And let's see what's happening here. So all of our elements have resized, relatively the same. The search type input is slightly different, but the text input date picker are all the same, text, area select and the buttons. The radio buttons and the checkboxes are actually not affected by width. What about height? Well, that works just as well. Let's set a height of 30 pixels. Notice, this kinda works but it affects elements differently. The search input is still not affected. Text input is. Date picker is. Radio button checkbox, notice what happened when we added this height. They kind of got bigger. But the elements themselves didn't get bigger, but the area around them did. So, those are behaving a bit weird. Text area worked just fine. Select, this didn't work, so height doesn't really work on select elements. Inputs, types them in a button, no change here but we did see a change on the button element which now looks slightly different. Notice how changing it's height affected it's appearance. Now, to fix some of these inconsistencies, you can use a property called box sizing. And you will set its value to border box. So by doing that, notice that all of our elements are now correctly the exact same width. And there were also some minor changes on the text inputs. Now, we can also add padding to these elements. If we had a an eight pixel padding, this is what it looks like. Let's bump this up to 18 so we can see it better. So again, these inputs are affected text date picker, text area, and the button but not the rest. What else can we use? Margins. These should work, no problem. So here is a 15 pixel margin all around. And this works on pretty much all the elements. Now, let's do a quick save and see how these changes are reflected on some other browsers, like for example Firefox. Well, here is the different story all together. The search input now looks just like the other ones. The radio buttons and check boxes, because we have a width applied they are centered. The select is also changed now. And all the buttons are changed as well. What about Chrome? Well Chrome is almost there. But it's a lot like Safari, it's also web browser. Now what happens when we set appearance none, and we override those user agent style sheets. Well, now it's a different story. Now suddenly, all of these elements. Are starting to look the same way in different browsers. So that's good. But yeah, in terms of box sizing properties, we can add widths to them. We can add heights. We can add padding, we can add margin, and let's actual do a border, one pixel solid blue. Let's see if that works and it does. On pretty much everything. In all browsers. So. Pretty much, all of these properties are supported. And you can go ahead and use them. No problem. All right, and that's it for these properties. Coming up next, we'll talk about positioning for elements, because not all of them are behaving as they should. That's coming up in the next lesson.