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 trialSahar Nasiri
7,454 Pointsdisplay:block
Hi :) I'm not sure I totally understand what display: block means?
3 Answers
Fábio Tavares da Costa
11,985 Pointsmeans: occupy the full width of the parent element. ex:
<!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
8,600 Pointsdisplay: 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
4,287 PointsA display block element always starts on a new line and takes the full width availlable for example the h1 or the p element.