티스토리 뷰
CSS Positioning
The Box Model
1. See it to believe it
Controlling the position of HTML elements allows you incredibly fine control over how your pages look. No longer will your <div>s sit directly on top of one another!
Check out the image in the Result tab: that's what the box model looks like! (We'll cover the details of margins, borders, and padding in the next section.)
2. Taking up space
Each HTML element gets its own box to live in.
As you saw, the outermost box of each element went all the way across the page. This is why until now, your HTML elements have been sitting on top of one another: by default, they take up the full width of the page.
We can change all this with the first positioning property we'll learn: the display property. We'll learn about four possible values.
block: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width.
inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line.
inline: This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line).
none: This makes the element and its content disappear from the page entirely!
3. Inline-block
Our <div>s were block elements by default;
If we specify a display of inline-block, however, our blocks are still blocks, but will be able to sit next to each other on the same line.
4. Inline
The inline-block value allows you to put several block elements on the same line. The inline value places all your elements next to one another, but not as blocks: they don't keep their dimensions.
5. None!
Finally, we'll try out the display value none. As you might expect, this prevents the page from displaying the selected element. As you might not expect, this removes the selected element from the page entirely, including any children and any content.
Margins, Borders, and Padding
6. Sketching it out
Now that you understand more about the display property and the box model, we can delve into the details of how each individual box behaves.
The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other.
The border is the edge of the element. It's what we've been making visible every time we set the border property.
The padding is the spacing between the content and the border. We can adjust this value with CSS to move the border closer to or farther from the content.
The content is the actual "stuff" in the box. If we're talking about a <p> element, the "stuff" is the text of the paragraph.
You'll see abbreviations like TM, TB, and TP in the diagram. These stand for "top margin," "top border," and "top padding." As we'll see, we can adjust the top, right, left, and bottom padding, border, and margin individually.
7. Margin
Let's start with our margins. Adjusting our margins not only moves our element relative to other elements on the page, but also relative to the "walls" of the HTML document.
For instance, if we take an HTML element with a specific width (such as our <div> in the editor) and set its margin to auto, this tells the document to automatically put equal left and right margins on our element, centering it on the page.
8. Margin top, right, bottom, left
If you want to specify a particular margin, you can do it like this:
You can also set an element's margins all at once: you just start from the top margin and go around clockwise (going from top to right to bottom to left). For instance,
9. Borders
We've worked with borders before, but it never hurts to have extra practice.
10. Padding
Let's adjust the padding. Remember, the padding is the space between your border and your innermost layer: the actual content.
Padding can be set in two ways, just like your margins. You can either select them individually, like this:
Or select them all in one declaration, like this:
You should also know that if you want your padding to be the same for all four sides, you can declare that value only once.
11. Negative values
Did you see that? Your <div> got huge! That's because the background color is the same for the content and the padding.
If you want to move an element in the other direction, you can give CSS a negative value:margin-left: -20px will move the element twenty pixels to the left.
Floating
13. To the right!
Okay! So we know how our individual elements are constructed. But how do we determine where they go on the page?
One way is to use floats. When you float an element on the page, you're telling the webpage: "I'm about to tell you where to put this element, but you have to put it into the flow of other elements." This means that if you have several elements all floating, they all know the others are there and don't land on top of each other.
14. To the left!
15. Float for two
As you may have already guessed, we can use floated elements to naturally divide our pages into different sections. Try it!
16. Clearing elements
If you tell an element to clear: left, it will immediately move below any floating elements on the left side of the page; it can also clear elements on the right. If you tell it to clear: both, it will get out of the way of elements floating on the left and right!
The syntax is what you're used to:
Absolute, Relative, and Fixed Positioning
17. Static by default
If you don't specify an element's positioning type, it defaults to static. This just means "where the element would normally go." If you don't tell an element how to position itself, it just plunks itself down in the document.
18. Absolute positioning
The first type of positioning is absolute positioning. When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to <html>.
To show you how this works, we've set the#outer div to have absolute positioning. This means that when you position the#inner div, it will be relative to #outer. (If#outer had the default positioning of static, then #inner would get positioned relative to the entire HTML document.)
19. Relative positioning
Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default static positioning.
20. Fixed positioning
Finally, fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.