Height in css
In this aticle we are going to learn about height, how we can set the size of html element with a height property in css.
We learnt about css in general learning what css can do in web pages, borders in css, padding in css, float in css and width in css so, we are going to learn about height, how we can use height property to set size of html element.
Height
Height is used in css to change or set the height of any element in web page and allow us to set any size we need.
We are going to give the div element height of 60px, copy and paste below code.
<div style="background: yellow; height: 60px;">This is 60px height of div element.</div>
So, we should have the following results.
So, the height of div element is 60px and there is a lot of space below text indicating more height added.
We are going to increase the height then we will observe the results, copy and paste below code.
<div style="background: yellow; height: 90px;">This is 90px height div element.</div>
So, we should have the following results.
So, we increased an element height and now is 90px and we can see that the space below text has increased meaning the height of the element has also increased.
Let us create an element with a height of 15px, copy and paste below code.
<div style="background: yellow; height: 15px;">This is 15px height div element.</div>
So, we should have the following results.
We can see that the text overlaps an element, this is because the element height is too small to contain this text, this is because the height of the text is larger than the height of the element as a result, is overlaping.
Let us create two elements with different heights of 45px and 90px, copy and paste below code.
<div style="background: yellow; height: 45px;">This is 45px; height div.</div>
<div style="background: red; height: 90px;">This is 90px; height div.</div>
So, we should have the following results.