In this tutorial display: inline-block is explained with easy and understandable
examples.
Basicaly when display inline-block is used it allow to specify width,height,margins and paddings
while this is not in display: inline property. This is the main reason of use of display: inline-block.
And it also does not put new line break as compared to display: block property.
Display inline-block
<style type="text/css">
div{
border: 3px solid lightgrey;
padding: 5px;
}
div img{
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
</style>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Lorem Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam
erat volutpat.
<img src="img/blog-img/lb-1.jpg" alt="bg-img">
<img src="img/blog-img/lb-2.jpg" alt="bg-img">
gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</div>
Output of above code
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam
erat volutpat. 
gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
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.
