| |
CSS Dimension -- How big an element should be. |
|
|
Subject: CSS Dimension -- How big an element should be.
Author: CyberSpider
Posted on: 04/16/2016 02:28:53 AM
For inline element, there is no way to control the dimension of those elements as they only take up space as much as necessary.
For block elements, however, we can instruct the device how exact dimension of those elements should be displayed. The properties of dimension are:
width -- auto, 200px, 20em, 80%;
min-width -- 0, 100px, 10em, 50%;
max-width -- none, 500px, 50em, 90%;
height -- auto, 200px, 20em, 80%;
min-height -- 0, 100px, 10em, 50%;
max-height -- none, 500px, 50em, 90%;
Note: Those properties specify the dimension of the content area of an element. The content area is inside the padding, border, and margin of that element.
.box {
border: 1px solid red;
}
#div1 {
width: auto; /* default */
}
#div2 {
width: 400px; /* fixed */
}
#div3 {
min-width: 300px; /* min */
}
#div4 {
max-width: 500px; /* max */
}
Try it yourself in sandbox »
References:
|
|
|
|
