Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Techniques Positioning Schemes Absolute Centering

Setting top, bottom, left and right to 0 contradict each other. And why use an obscure ::after pseudo class?

Firstly, thanks Guil for very nice teaching style. However, Q1: Setting top, bottom, left and right to 0 contradict each other. It would make more sense if they are set to "initial" or are reset in some more logical way. How and why does it work? Perhaps by confusing the browser, so that when it sees the "margin auto" afterwards, it thinks "oh, thanks God, at least I know what you mean here" and does the thing?

Q2: Why use an obscure ::after pseudo class? Instead, why not create that image as a separate (proper!) div? Like, make <div class="actual-img"> inside the "icon-img" div, and then use exactly the same CSS style as is currently used for the .icon-img::after class, but use it on the suggested .actual-img class instead. I tried and it worked both in Chrome and IE. Guil?

2 Answers

Chris Andruszko
Chris Andruszko
18,392 Points

I hope I can address your questions and that I didn't misunderstand anything.

First of all, never set a value to "initial." Internet Explorer won't understand it. But, if you did set it to initial, other browsers would understand it as being the same thing as setting it to "auto" (because "auto" is the initial value for top, right, bottom, and left properties). So it wouldn't do anything. When you give those properties a value of "0," you're saying "top side, right side, bottom side, and left side, DON'T pull or push this element at all." But now the browser won't know what your intentions are. So, in a way, you're right. You could say that you're confusing the browser. But a better way to think of it is you're giving the element no position. So you need to give it a position. Giving it a margin of "auto" gives it an equal value all around. The browser says "Oh! Now I know where to put it!" The result naturally puts it in the center of the container.

As for using the :after pseudo class, the method you're describing is basically just another way of doing it. But sometimes the best solution for inserting an image is using CSS. For example, I recently created a simple slideshow for a client's home page, but it was looking kind of bland. So, I put a circular gradient in the corner to sort of mimic a glare effect, and now it looks great. If I used an img tag, I would have had to set a div with the gradient on top of the img element. I would have needed two elements for each image. That's more lines of code in the HTML, CSS, and JS. So instead, using CSS, I have each div grab the pic and apply the gradient. Below is the code I wrote for one of the pictures in the slide show. As you can see, I put the gradient and image in the same class and the same declaration. It's highly efficient.

        .pic1_layer {
            background: -webkit-radial-gradient(circle at bottom right, #fff, transparent 30%), #fff url('../images/1.jpg') no-repeat center;
            background: radial-gradient(circle at bottom right, #fff, transparent 30%), #fff url('../images/1.jpg') no-repeat center;

Hope this helps!

Thanks for quick reply Chris. It does make it clearer.