Loading Please Wait...
CSS width and height properties used to set the width and height of the content area. The width and height properties do not include margin, border, and padding (by default).
width: 10px;
height: 5%;
CSS width and height properties can have following values:
Keyword values: auto, min-content (preferred minimum width/height), max-content (preferred maximum width/height), fit-content (used available width but not more than max-content).
Length values: px, cm, rem, em, etc.
Percentage values: 5%, 10%, etc.
Zero value: 0px, 0%, 0. It is best practice not to use any length or percentage value when defining 0 padding.
Viewport value: relative to the viewport display (or device width and height). vw (viewport width), vh (viewport height), vmin (viewport minimum), and vmax (viewport maximum),
Global value: inherit, initial, revert, revert-layer, unset.
/* keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;
height: max-content;
height: min-content;
height: fit-content(20em);
height: auto;
/* length values */
width: 300px;
width: 25em;
height: 300px;
height: 25em;
/* percentage value */
width: 75%;
height: 75%;
/* viewport value */
width: 80vw; /* 80% of viewport */
height: 100vh; /* 100% of viewport */
width: 10vmin; /* width is 10% of viewport*/
height: 20vmax; /* height 20% of viewport*/
/* global values */
width: inherit;
height: inherit;
CSS min-width and min-height properties set minimum width and height of the element.
CSS min-width and min-height properties do not set actual width and height. It is set by browser preference but the element width and height can never be smaller than min-width and min-height.
It is useful for creating responsive layout and design.
min-width: 200px;
min-height: 100px;
CSS max-width and max-height properties set maximum width and height of the element.
CSS max-width and max-height properties do not set actual width and height. It is set by browser preference but the element width and height can never be larger than max-width and max-height.
It is useful for creating responsive layout and design.
max-width: 200px;
max-height: 100px;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved