Categories
CSS

Setting Width and Height of an element in CSS

Setting width and height of an element is a useful but not always important to do that. There are plenty more properties that you can achieve your solution such as grid and flex box. We will cover these in another post. Height and Width properties go parallel to each other. Properties of width and height are width, max-width, min-width, height, max-height, min-height. As they are self explanatory, we will go through their values that they are eligible for. You can set values of a width and height property in 5 different ways.

div {
     width: auto;
     width: 300px;
     width: 10%;
     width: initial,
     width: inherit,
}

These values can be applied to any of the width and height properties. The table below explains each one of them in detail.

ValueExplanation
auto This is default value and browser calculates the height and width according to the screen size.
length Height/width can be set in px, cm, pt etc such as 300px
% Height/width can be set in percent such as 50%.
initial Sets the height/width to its default value
inherit The value of height/width of the current element will be inherited from its parent element

Examples of CSS height and width are shown below

width: auto;
height: auto;
Setting Width and Height of an element in CSS
width: 200px;
height: 200px;
Setting Width and Height of an element in CSS
width: 50%;
height: 50%;

Percentage is set according to the height of the screen.
Setting Width and Height of an element in CSS
width: initial;
height: initial;
Setting Width and Height of an element in CSS
width: inherit;
height: inherit;
Setting Width and Height of an element in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *