Streaming live at 10am (PST)

Using padding to create the height of a section

What is the advantage of creating the height of a section using padding as opposed to the height property. Sergie uses padding in the tutorials, and I used this in my first build, but from my experience building traditional websites I would normally set the height of a container using the height property. Maybe using padding is a more effective method but I’d be interested in hearing the pros and cons.

Using paddings instead of heights will help you set your text/containers in the right position. I’d rather go with paddings/margins than element heights. Box model is a perfect example of how it all works and what stretches to fit a property.

Eg. If you set 100px height for a box and use a padding for it, container inside will be smaller. Using margins on inner container will resize the outer one. Using only paddings without the height will let you control the margin of the element without worying about the space above and below - if it’s equal etc.

That’s just my opinion.

Yeah I hear what your saying but I’ve just never thought of using it in that way I guess.

For me the main reason I think you should use Padding inside of a container versus setting a fixed height or width on the block is so that content flows naturally. Let me extrapolate (haha) on my point:

  • Create a block with a padding of 20px on all sides AND fixed pixel height of 200px.
  • Create a block with a padding of 20px on all sides.
  • Now paste a lot of text inside each block and see what happens.

The problem with the fixed one is every time the text changes you have to change the height too. It’s a pain. You won’t want to do this for every block especially for a responsive website that makes the blocks change all the time!

Yeah that makes sense. I think I was trying to set heights using percentages before and finding it frustrating.

Totally. Percentages work a little different from pixels. When you set a percentage of 50%, for example, you’re telling that block to be 50% of the width of its parent.

So If you have a Div block that is 200px wide (it doesn’t have to have a px width set on, lets say the browser just calculates/renders it at 200px) and you put a div block inside of it and set it to 50%, this div block will rendered at 100px. Now if that parent div block changes to a different width then the div block inside will change dynamically to reflect 50%. Does that make sense?