🌱 Digital Garden

Search

Search IconIcon to open search

Width and Height (CSS)

Last updated Jul 20, 2023 Edit Source

Width and Height are two important properties that let us set specific sizes for blocks inside an HTML page, these properties can take any measurement unit (relative or absolute).

To set the Width we have the special property width: md.

To set the Height we have the property: height: md.

1
2
3
4
img {
	width: 50px;
	height: 40%;
}

We can set a minimum and maximum size for each of these properties, if we set them, it wont matter from where our page is being accessed, it will stick with the minimum or maximum size we specify.

To do this, we just need to add the prefix min-x where x is width or height for setting a minimum size. Finally we use the prefix max-x where x is width or height for setting a maximum size.

1
2
3
4
div {
	min-width: 30%;
	max-height: 120%;
}

I almost failed the question: is it acceptable to specify negative values for height and width? The answer is NO, its not acceptable.