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

HTML How to Make a Website Adding Pages to a Website Add and Style Icons

Posted by Dhruv Gomber
Dhruv Gomber
Courses Plus Student 628 Points

What does a block element, inline element, display:none element, and inline-block do?

Help?

3 Answers

Chris Malcolm
Chris Malcolm
2,909 Points
Chris Malcolm
Chris Malcolm
2,909 Points
  • none: element is visually taken out of the dom, meaning its not visible at all.
  • block: element will demand it's own line (default width: 100%) ex. div
  • inline element: element will share a line with other inline elements (cannot set width, height, or top and bottom margins) ex. img, span, strong
  • inline-block: element will share a line with other elements. generally these are used with content type elements that have more nested elements within them such as divs, li, etc (no default width)
Michael Alaev
Michael Alaev
5,415 Points
Michael Alaev
Michael Alaev
5,415 Points

"Inline" is categorization of HTML elements, as contrasted with "block-level" elements. Inline elements can appear within block-level or other inline elements. They take up the width of their contents. The differences between inline and block-level elements include: read more about it here

"Block-level" is categorization of HTML (Hypertext Markup Language) elements, as contrasted with "inline" elements. Block-level elements may appear only within a <body> element. Their most significant characteristic is that they typically are formatted with a line break before and after the element (thereby creating a stand-alone block of content). That is, they take up the width of their containers. read more about it here

The "display" attribute lets you control the rendering of graphical or container elements. read more about it here

Dhruv Gomber
PLUS
Dhruv Gomber
Courses Plus Student 628 Points
Dhruv Gomber
Dhruv Gomber
Courses Plus Student 628 Points

Doesn't that mean the inline-block and inline are the same?

Chris Malcolm
Chris Malcolm
2,909 Points
Chris Malcolm
Chris Malcolm
2,909 Points

inline-block behaves like a block (padding, margins,height,width can be set)..but can sit next to other elements like inline (inline itself cannot set width, height, or top/bottom padding margins).