How does the padding work in responsive CSS square?

Question

I am now learning how to develop responsive liquid CSS designs and came across technique, where block display elements (eg. div) have % dimensions. In order to display them, the following CSS code is used:

.class:before {
    content: "";
    display: block;
    padding-top: 100%;
}

My confusion comes from padding property. As far as I know, in the CSS box model (CSS2), padding affects the inner part of the block element, not outer. But in the technique used, without it, element is not visible. Could somebody explain to me in terms of box model, what padding property does here?

In case my explanation is confusing, I am attaching two links with working examples:

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

http://jsfiddle.net/josedvq/38Tnx/

Alexander.

Answer 1

The basic answer is that if you have an empty box item in HTML, then the width and height of the element displayed on the page will be 0, making the item invisible. This makes sense: if there is nothing inside it, and the size is 0, well who wants to see it!?

What you're doing with padding is making it be 100% of the parent box's value for padding. Because padding effects the inside of the block (and margin the outside) the overall width and height of the box is changed. This makes the box be drawn on screen, and creates the blue box you saw in jsFiddle.

The reason your box doesn't show up when you remove it is the attribute overflow: hidden. When you say that, you clip out any extra content from the box, if the content inside were to overflow the box's size. If you remove overflow: hidden and padding 100% then you'll end up with some small white text.

EDIT: a few other things that are going on: Youre also using position: absolute which removes a box item from the regular flow of the page. That, and the four following top, left, bottom, right tags make the box have a predefined location. Removing the position: absolute brings the div back into view as a blue box around the white text

This is an opinion: CSS is a nightmare. This is not an opinion: a great way to learn CSS would be to singly add or subtract CSS lines to see what they individually do. W3 Schools thankfully also contains a huge list of every attribute in CSS and HTML, which means that you can usually find out howsoemthing in those languages are supposed to work by search for "W3 mythingyhere"