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 How to Make a Website Adding Pages to a Website Style New Pages

Radu Zurbau
Radu Zurbau
501 Points
Posted by Radu Zurbau
Radu Zurbau
501 Points

I still don't understand what the "display" property attribute "block" does in the case of the profile photo

I understand from the video instruction that "display: block" centers the image however, how, why? How and why does "block" centers the image? Furthermore, why do we need the "display" property since we've already set the image as centered, supposedly, using the "margin" property and the "auto" attribute. However, if I erase the "display: block" the image will no longer be centered, even though the margin is still set to auto, and all I've done is erase the "display: block" line.

Here's the CSS code..

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 30%; }

3 Answers

highlandcow
highlandcow
7,352 Points
highlandcow
highlandcow
7,352 Points

Images take the inline display declaration by default. When you change display to block, you're able to make use of the margin property to center the image.

highlandcow
highlandcow
7,352 Points
highlandcow
highlandcow
7,352 Points

Not quite. Although I see how you'd conclude that from my poorly worded answer.

Have a look at what this code does in a browser and you'll see what I mean:

<style>
.block { display: block; margin: 0 auto; }
.inline { margin: 0 auto; }
</style>
<html>
<img src="https://www.google.com/images/srpr/logo11w.png" alt="ok" class="block">
<img src="https://www.google.com/images/srpr/logo11w.png" alt="ok" class="inline">
</html>

This article goes in to the display property and all of its declarations: http://quirksmode.org/css/css2/display.html

Radu Zurbau
Radu Zurbau
501 Points
Radu Zurbau
Radu Zurbau
501 Points

So basically, until I set the display to block, the margin property will not apply in case of pictures, as it does in case of sections. Did I get it right?