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

Posted by Yeshaya Coffman
.a{fill-rule:evenodd;}techdegree seal-36
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 Points

css measurements

If I have only a paragraph in my page and I set it to inline-block, and I give it a margin of 50%. Since the body is the size of only that paragraph what does 50% mean? 50% of what? the body? but the body is set by the size of the paragraph+margin.

<!DOCTYPE html>
<html>
<head>
  <link href="thecss.css" rel="stylesheet">
</head>
<body>
  <p>hello</p>
</body>
</html>

CSS``` 
body {
  background-color: green;
}

p {
  display: inline-block;
  margin-top: 50%;
}

2 Answers

Claudiu Bancos
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points

In your case, the size of the body is set by the size of the browser window, not by the size of the content inside of it. So 50% means 50% of the size of the browser window. (Assuming the body doesn't have any margins or padding - those would affect its size too.)

If you go into your Dev Tools and examine the body element, you'll see it actually spans the entire browser window.

EDIT: When you set margins as a percentage, they are always based on the parent container's WIDTH. Even top-margins. So margin-top: 50% means a top-margin equal to 50% of the parent container's width. Which in your case is the body's width, which is set by the browser window's width.

Yeshaya Coffman
.a{fill-rule:evenodd;}techdegree seal-36
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 Points

I can't post a picture because the markdown is not working but I'ts not 50% of the page. Also in the google chrome developer tools the body is only the content inthis case the paragraph.

Claudiu Bancos
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points

Oh sorry I thought you were talking about width, not height.

In your margin-top declaration, I believe that 50% actually means 50% of the body's WIDTH (which is the browser window's width). That's what I'm getting trying it in Chrome right now.

http://www.hongkiat.com/blog/calculate-css-percentage-margins/

Updated my original answer to account for this.

Yeshaya Coffman
.a{fill-rule:evenodd;}techdegree seal-36
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 Points

width!? thank you! and thanks for the link.

Marc Sanchez
Marc Sanchez
20,039 Points
Marc Sanchez
Marc Sanchez
20,039 Points

You gave it a margin-top of 50% so 50% from the top means half the browser window. Can you specify what you are trying to achieve since a screenshot can't be provided?