revision:
- sets the width of an element. The width of an element does not include padding, borders, or margins!
Note: The min-width and max-width properties override the width property.
Property values:
auto : default value. The browser calculates the width
length : defines the width in px, cm, etc.
% : defines the width in percent of the containing block
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div>
<h4>width: auto (default)</h4>
<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas
imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum
maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>
<h4>width: 150px</h4>
<div class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas
imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum
maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>
<h4>width: 50%</h4>
<div class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas
imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum
maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>
</div>
<style>
div.a {width: auto; border: 0.1vw solid black;}
div.b {width: 15vw; border: 0.1vw solid black;}
div.c {width: 50%; border: 0.1vw solid black;}
</style>