In the last three articles, we learned about padding and margin in CSS. Hope you have read the articles linked in the last article and you have no confusion between padding and margin now. If there is any confusion, feel free to comment and ask doubts.
Now in this article, we are going to learn about width and height in CSS. Although the concept is very simple, if you don't know about this it will cause problems in learning box-model in CSS.
Let's begin...
CSS height and width
The height and width properties are used to describe height and width of an element. We can set both of this properties to auto (default) which means browser calculates height and width. Another way is to specify length values in px, cm, etc. units or in percentage(%) of the containing block.
About max-width
The max-width property is used to set the maximum width of an element. All the possible values are same as width property with none as default which means there is no restriction on maximum width.
In the case of above div, if you decrease the width of browser window below specified width then you will get the horizontal scrollbar. If we use max-width instead, the browser will handle small windows properly.
That's all for today. In the next article, we will learn about box-model in CSS. You will be surprised to know how much easy it is as we have learned padding and margin in detail.
Till the #keepCoding.
