[TIL] 1104 LikeLion๐Ÿฆ FES 04

Margin Collapsing

๋ธ”๋ก ์š”์†Œ์˜ ์ˆ˜์ง๋ฐฉํ–ฅ ๋งˆ์ง„์ด ์„œ๋กœ ๋งž๋‹ฟ์•„ ์žˆ๋‹ค๋ฉด ๋‘˜ ์ค‘ ํฐ ๋งˆ์ง„๋งŒ ์ ์šฉ๋˜๋Š” ํ˜„์ƒ

ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

Position

default ๊ฐ’์€ static
relative๋Š” ๋ณธ์ธ์ด ์›๋ž˜ ์žˆ์–ด์•ผ ํ•  ์œ„์น˜ ๊ธฐ์ค€์ด๋‹ค.

position: relative;
left: 50px;

์„ ์ฃผ๋ฉด static์œ„์น˜ ๊ธฐ์ค€ ์˜ค๋ฅธ์ชฝ์œผ๋กœ 50px ์ด๋™.
absolute๋Š” normal-flow๋ฅผ ๋ฒ—์–ด๋‚˜์„œ static์ด์—ˆ์„ ์œ„์น˜์—์„œ ๋ถ• ๋– ์žˆ๋Š” ๋Š๋‚Œ์ด๋‹ค.
top, left๋กœ ์œ„์น˜๋ฅผ ์ด๋™์‹œํ‚ค๋ฉด position์ด static์ด ์•„๋‹Œ ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ด๋™ํ•œ๋‹ค.
๋ถ€๋ชจ ์š”์†Œ ์ค‘ relative๊ฐ€ ์—†๋‹ค๋ฉด body๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•œ๋‹ค.

์ œ1ํšŒ ์ž์‹ ๋งŒ์˜ ์บ๋ฆญํ„ฐ ๊ทธ๋ฆฌ๊ธฐ ๊ฒฝ์ง„๋Œ€ํšŒ


์šด ์ข‹๊ฒŒ๋„ 2๋“ฑ์ƒ์„ ์ˆ˜์ƒํ–ˆ๋‹ค

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ