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 CSS Layout Basics Positioning Page Content How Absolute Positioning Works

Philip Kroupoderov
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Philip Kroupoderov
Front End Web Development Techdegree Graduate 21,641 Points
Posted by Philip Kroupoderov
.a{fill-rule:evenodd;}techdegree seal-36
Philip Kroupoderov
Front End Web Development Techdegree Graduate 21,641 Points

Double the amount specified in the top and left offset is being applied

He wrote for the list item:

top: 100px; left: 50px;

I took a screenshot of the webpage and opened it in preview (I use a macbook). I measured the actual distance and there was actually a 200px top offset and a 100px left offset. Could someone explain why it's doubled??

2 Answers

Neil McPartlin
Neil McPartlin
14,662 Points
Neil McPartlin
Neil McPartlin
14,662 Points

Hi Philip. I suspect you are viewing the page on a 'high resolution' display. This would explain why the values 50px and 100px appear to be 100px and 200px respectively.

Take a look at this video...

https://teamtreehouse.com/library/pixel-units

...and at around 2:33, Guil explains the following...

But now that pixel densities are increasing across devices and display resolutions vary widely, the definition of a pixel has also changed. Nowadays, the pixel unit in CSS doesn't really have anything to do with physical screen pixels.

The CSS pixel is actually an abstract reference unit. Instead of being solely based on device or hardware pixels, the way CSS pixels are displayed has more to do with the pixel density of the viewing device. For example, let's say that we give an element a width and height of 200 pixels. When we view the design on a normal screen, it appears 200 pixels wide and 200 pixels tall. But when we view it on a device that has twice the pixel density, we might notice that the width and height of the element is actually now equivalent to 400 pixels.

Patrik Horváth
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

Hi,

so TOP and LEFT properties are valid only in ABSOLUT elements and are based on PARENT RELATIVE element ( parent have to have display: relative ) and position TOP 0 and LEFT 0 are at PARENT position 0 and 0

so if parent element have margin-top: 100px, then TOP 0 for child ABSOLUT element means position with margin

i hope i helped you

Patrik Horváth
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

ehmn my eng isnt so good for this, but simple yes is it passible every browser have its own DEFAULT property and if RELATIVE PARENT element have some MARGIN and you add properties to ABSOLUT Chieldren ELEMENT so it look like its double but its not

PS use NORMALIZE.css for example ( https://necolas.github.io/normalize.css/ )

it reset all properties