From the course: Design the Web: Graphics and CSS Pseudo-Elements

Unlock this course with a free trial

Join today to access over 22,500 courses taught by industry experts.

Spacing and layout adjustments

Spacing and layout adjustments

Now with our pseudo-element aligning to the bottom and rightmost area of the h1 tag, what we want to do now is extend the h1 tag so that the edge, the leftmost edge of the fold graphic lines up with the rightmost edge of the page. Now the sizing in here is being conformed by the fact that the page element here has some padding settings inside. Now to illustrate what we need to do, the page class element, which is represented here in gray, has padding properties assigned to it. There's 20 pixels on the top, 30 on the right, 30 on the bottom and 50 pixels on the left. Now any block elements that are inside of this div, will conform to not only to the outer most shape, but the padding inside as well. So the h1 tag here will conform to being within 30 pixels on the right, and 50 pixels on the left. If we wanted to get the h1 tag to be flush with the rightmost area of the page, we would set a margin right property of negative 30 to counteract the 30 pixels of padding on the right of the…

Contents