Boxing with CSS

Transcript

In today’s lesson we are going to cover styling a page with boxes.

If you recall, I use the top of the Styles pane to change the background color of my header in the browser. But you can use the Styles pane for more than just changing a tag style. If I select a paragraph from my page this time and scroll down to the bottom of the Styles pane, there's a bunch of colored boxes. These boxes tell me how much space the tag selected takes up. I'll explain these boxes one at a time, and ultimately show you how to change how much space your tags take up on your page. 

The innermost box is called the content box. It has two numbers that tell you the width and the height in pixels. If I hover over my paragraphs content box, a blue rectangle shows up on my browser and shows me how much space the tags content takes up on the screen. 

The outermost box is called the margin box. It shows you how much space there is between the tag you selected and the tags around it. Some tags have margin by default, like paragraphs and headings. Others like images don't. Now that you know how the margin box works, let me show you how to code it.

You can change how much margin a tag has by using the four margin properties: Margin top, bottom, left and right. These properties take pixel values. I gave my welcome message a margin top of 30 pixels to have it a little further down from the h1 above it.

It's important to note that margin top and bottom collapse. Collapsing margins happen when two vertical margins come in contact with one another. If one margin is greater than the other, then that margin overrides the other, leaving one margin. This means that if my heading has a margin bottom of 20 pixels, and my paragraph had a margin top of 20 pixels there wouldn't be 40 pixels of margin between the two tags. They'd only be 20..

It's like the bigger margin straight up ate the other one and left nothing behind. Hey were getting near the end of the course. You are doing really well – so lets move on.