How does the padding work in responsive CSS square?

Tags: css,responsive-design,liquid-layout

Problem :

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:


Solution :

CSS pseudo element ::before (:before) or ::after (:after) + content property, creates a child element inside the container.

And a percentage padding value is relative to the width of the container - W3C spec, padding-top:100% + display:block creates a square.

.square {
    width: 10%;
    background: blue;
.square:before {
    content: "";
    display: block;
    padding-top: 100%;
<div class="square"></div>

    CSS Howto..

    Multiple css styles applied to one element, how to force one style over the other

    how to set width of a div in percentage minus certain pixels using javascript or css

    how do i align contact form 7 next to text

    How can I make each section fit within the li box?

    How to maintain consistent text and image positioning using CSS

    JQuery Animate() showing sticky behaviour with other elements in the same class

    how to make an mail to form work

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    How do I target nested elements with CSS correctly? [closed]

    CSS: Changing div's property on another div's a:hover. Possible ? How?

    How can I change the content of