The % unit
The % relative unit sets a size of
a child element relative to the size of its
parent. For example, the width of a rectangle
equal to 50% means that it is half the
size of its parent.
Example
Let's give the child element's rectangle
a width of 20% and a height of
40%:
<div>
<p></p>
</div>
div {
border: 1px solid black;
width: 200px;
height: 100px;
}
p {
border: 1px solid red;
width: 20%;
height: 40%;
}
:
See also
-
the
pxunit
that specifies a size in pixels -
the
frunit
that specifies a size in fr -
the
emunit
that specifies a size in em -
the
remunit
that specifies a size in rem -
the
vwunit
that specifies a size in vw -
the
vhunit
that specifies a size in vh -
the
vmaxunit
that specifies a size in vmax -
the
vminunit
that specifies a size in vmin
