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 Make an About Page

Posted by Mat Sandacz
Mat Sandacz
592 Points

Code Challenge- CSS Block Elements

What does the following property means:

display:block;

Could some one please explain it to me in a easy way?

about.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src= "img/gratt.png" alt="Gratt" class= "profile-photo">
        <p>hi</p>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>
css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}
.profile-photo{
display: block;
}
Luis Chiappe
Luis Chiappe
Courses Plus Student 10,636 Points

Hi Mat,

display: blocks; means that the selector starts behavior like a box. Exist 2 types of elements on HTML, block tags and line tags. Blocks tags you can modifier all properties that the Box Model has. Like margin, padding, floats, etc.

On this case you convert you "img" on block elements, so you can work with that like a div.

Hope that helps.

2 Answers

Mat Sandacz
Mat Sandacz
592 Points
Mat Sandacz
Mat Sandacz
592 Points

Luis Chiappe Hey. Yes i got it, but i could also modify those properties on other selectors which were not set to block. Just like this one: nav ul { list-style: none; margin: 0 10px; padding: 0; }

Luis Chiappe
PLUS
Luis Chiappe
Courses Plus Student 10,636 Points
Luis Chiappe
Luis Chiappe
Courses Plus Student 10,636 Points

Mat, because the ul is a block element by default.

http://www.w3schools.com/html/html_blocks.asp