Ensures that an element with variable width
will retain a proportionate height
value.
padding-top
on the ::before
pseudo-element, making the height
of the element equal to a percentage of its width
.height
to width
can be altered as necessary. For example a padding-top
of 100%
will create a responsive square (1:1 ratio).<div class="constant-width-to-height-ratio"></div>
.constant-width-to-height-ratio {
background: #9C27B0;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
CSS, Layout
Ensures that an element self-clears its children.
CSS, Layout
Resets the box-model so that width
and height
are not affected by border
or padding
.
CSS, Layout
Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.