Padding on element or ::before when empty?

[Alan C]

So I was setting up a CSS background image for a header, when it came time to add the padding to expand the currently empty div I looked around on the net first and found a few and by this I mean like 1 person who actually puts the padding on a ::before element.

So instead of

element{
  padding-bottom: 300px;
}

They have

element::before{
  content: '';
  display: block;
  padding-bottom: 300px;
}

Can anyone think of why this may or not be a better practice? Outside of that it takes up more space in the CSS and may not be supported by older browsers? I’m honestly baffled right now..

[Paulie_D]

I can’t think of a reason to do it that way.

[nixnerd]

@alan-c

This is a common way to maintain aspect ratio of photos or other elements (using background-image). However… when done CORRECTLY, you should be using a relative value for the padding. No idea why they would use px.

[Alan C]

Oh I just threw that in there lol. I couldn’t remember the actual example.

Could you explain how this works though? I don’t understand why it is any better.

[nixnerd]

Why it is any better than what? Padding top or padding bottom?

[nixnerd]

This is rather trivial. But it works great for photos.

Also though… I used it to build this:

http://codepen.io/Joe_Temp/pen/FdBxI

It’s a totally fluid, pure CSS iPhone thingy. Go ahead and resize it.

[nixnerd]

Could you explain how this works though? I don’t understand why it is any better.

The short answer is:

Because you can’t do this with just padding :)

[nixnerd]

I’ve actually been doing a lot of little icons like this because I can keep things really fluid AND achieve basically a pixel perfect design.

[nixnerd]

By the way though… this isn’t really necessary as you can now use vw for both height and width. It’s got pretty broad support.

I gotta thank @Paulie_D for helping me abandon this method.

[Author]

Posts