Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ravi Kumar
Ravi Kumar
3,189 Points

Difference between block and inline-block in display property?

Plz provide me the difference between block and inline-block in display property?

Abe Layee
Abe Layee
8,378 Points

I think you check this site. It tells you all the differences between inline and block element. https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements. Block element starts new line while inline-element sits next to each other. For example, h1-h6 are block elements which mean they will start a new line in the browser. Inline such as img sits next to each other. Run this code in the browser and you will see each header takes up the whole space pushing the other element below it.

<h1> Hello world</h1>/*block element each elements start a new lin*/
<h2>How is the world doing today?</h2>/*block element each elements start a new line*/

<a href="www.google.com">Google</a>/*inline element and each elements sit next each other*/
<a href="www.yahoo.com">Yahoo</a>/*inline element and each elements sit next each othe*/

1 Answer

Frederico Graciano
PLUS
Frederico Graciano
Courses Plus Student 2,768 Points
Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points 
display: block;  /*   uses one line for all the block element    */

display: inline-block;  /* Uses just the size necessary to hold the content and not all the line, still is a block tho.*/

You can see the difference by opening the workspace and create a index.html and paste this inside and save and preview it.

<!DOCTYPE html>
<html>
<head>
<style>
p {
    display: block;
border: 5px solid red;
}

.pp {

display:inline-block;

border: 5px solid red;

}
</style>
</head>
<body>

<p>This is a paragraph uses display:block.</p>

<p class="pp">This is a paragraph uses display:inline-block.</p>


</body>
</html>