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 Iconography

Sahar Nasiri
Sahar Nasiri
7,454 Points
Posted by Sahar Nasiri
Sahar Nasiri
7,454 Points

display:block

Hi :) I'm not sure I totally understand what display: block means?

3 Answers

Fábio Tavares da Costa
Fábio Tavares da Costa
11,985 Points
Fábio Tavares da Costa
Fábio Tavares da Costa
11,985 Points

means: occupy the full width of the parent element. ex:

https://jsbin.com/ripadi/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<h1>I use the full width</h1>

<span>by default I'm in line.
remove the comment from
// span { display : block; background : blue }
to change it.
</span>
<style>
h1 { background : lime }
span { background : limegreen }
// span { display : block; background : blue }
</style>
<body>
Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

display: block basicaly defines that the element it is applied to is a block element.

There are other types that can be used for example: inline, flex, none etc which will define a different type of layout to the element.

This website here : http://www.impressivewebs.com/difference-block-inline-css/ Has a very good explination of the difference between display: block and display: inline which should help you better understand what display: block is actually doing.

Alain Ghiai
Alain Ghiai
4,287 Points
Alain Ghiai
Alain Ghiai
4,287 Points

A display block element always starts on a new line and takes the full width availlable for example the h1 or the p element.