In css3 you can specify the width of any element or box.You can specify
the width of any element by using width element.
Values for width
1) You can specify width with auto value
2) You can specify width with px value
3) You can specify width with % value
4) You can specify width with vh value
Width using value with auto
<style type="text/css">
.in-p1{
background: lightyellow;
height: 100px;
width: auto;
}
</style>
<p class="in-p1">
This is paragraph having background color lightyellow.
This paragraph has width with auto value.As you put more
text in this paragraph it's width will changed automatically
according to the paragraph width.
</p>
Out put of the above code
This is paragraph having background color lightyellow. This paragraph has width with auto value.As you put more text in this paragraph it's width will changed automatically according to the paragraph width.
Width using value with px
<style type="text/css">
.in-p1{
background: lightyellow;
height: 100px;
width: 300px;
}
</style>
<p class="in-p1">
This is paragraph having background color lightyellow.
This paragraph has width of 300px fixed.
</p>
Out put of the above code
This is paragraph having background color lightyellow. This paragraph has width of 300px fixed.
Width using value with %
<style type="text/css">
.in-p1{
background: lightyellow;
height: 200px;
width: 20%;
}
</style>
<p class="in-p1">
This is paragraph having background color lightyellow.
This paragraph has width of 20% .
</p>
Out put of the above code
This is paragraph having background color lightyellow. This paragraph has width of 20%.
Note
Out put of width using persentage will be different of different screen.
Width using value with vw (view width)
<style type="text/css">
.in-p1{
background: lightyellow;
height: 200px;
width: 30vw;
}
</style>
<p class="in-p1">
This is paragraph having background color lightyellow.
This paragraph has width of 30vw .
</p>
Out put of the above code
This is paragraph having background color lightyellow. This paragraph has width of 30vw.
Note
Out put of height using vw will be different according to height of the screen.
Width using max-width property
The max-width property is used to specify the
maximum width of the of the element or any targeted box.
Width using max-width
<style type="text/css">
.in-p1{
background: lightyellow;
max-width: 300px;
height: 200px;
}
</style>
<p class="in-p1">
This is paragraph having background color lightyellow.
This paragraph has max-width of 300px .
</p>
Out put of the above code
This is paragraph having background color lightyellow. This paragraph has max-width 300px.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
