Margin: auto
Give equal margins on each side of the element specified.
Text-align
Use for aligning texts.
Display property
The box model
The box model: pitfall
Give equal margins on each side of the element specified.
Text-align
Use for aligning texts.
Display property
- 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(div's will take up separate lines).
- inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line (div's will move into 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). The inline display value is better suited for HTML elements that are blocks by default, such as headers and paragraphs because it is going to squash whatever is inlined into the line (ex. image).
- none: This makes the element and its content disappear from the page entirely. It also removes the selected element from the page entirely, including any children and any content.
The box model
- 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.
The box model: pitfall
- width: the length of content-box only
- height: the height of content-box only
- Therefore, do box-sizing: border-box; Then, width=content-box(auto) + padding-left + padding-right + border-left + border-right. height will be changed in the same manner.
Margin & padding
Float
Decides which side an element will be located at (left, right ...)
Clear
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!
Positioning
Absolute: 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>.
Relative: it tells the element to move relative to where it would have landed if it just had the default staticpositioning. If you give an element relative positioning and tell it to have a margin-top of 10px, it doesn't move down ten pixels from any particular thing—it moves down ten pixels from where it otherwise would have been.
FIxed: 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.
Default computed style:
- Top, right, bottom, left.
Float
Decides which side an element will be located at (left, right ...)
Clear
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!
Positioning
Absolute: 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>.
Relative: it tells the element to move relative to where it would have landed if it just had the default staticpositioning. If you give an element relative positioning and tell it to have a margin-top of 10px, it doesn't move down ten pixels from any particular thing—it moves down ten pixels from where it otherwise would have been.
FIxed: 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.
Default computed style:
- Display: block; means:
- there will be no elements inline with the element specified. The rest space will be filled with appropriate margin.
- if you don't specify the width, it will be
- if you don't specify the height, the child element's height will be its content+padding+border.