๐ inline vs block
inline | block |
์ปจํ ์ธ ๋ถ๋ถ๋งํผ๋ง ์์ญ์ ์ฐจ์งํ๋ค. | ํ์ค์ ๋ชจ๋ ์ฐจ์งํ๋ค. |
๋์ด์ ๋๋น๊ฐ ์กฐ์ ์ด ๋ถ๊ฐ๋ฅํ๋ค. (css๋ก ์ ์ฉ์๋จ) | ๋์ด,๋๋น ๋ชจ๋ ์กฐ์ ๊ฐ๋ฅํ๋ค. |
padding , border ์์ฑ ์ฌ์ฉ o / margin ์ข์ฐ๋ง ๊ฐ๋ฅํ๋ค. | padding , border , margin ๋ชจ๋ ์ฌ์ฉ๊ฐ๋ฅํ๋ฉฐ ํด๋น ์์ฑ๋ค์ด ๋ค๋ฅธ์์๋ฅผ ๋ฐ์ด๋ธ๋ค. |
Q. ๋ง์ฝ inline์์์ฒ๋ผ ๊ฐ๋ก๋ก ๋ฐฐ์น๋๋ฉด์ ๋์ด์ ๋๋น๋ฅผ ์ค์ ํด์ฃผ๊ณ ์ถ๋ค๋ฉด?
A. inline-block ์ฌ์ฉํ์!
๐ ๋ง์ง ๊ฒน์นจ ํ์ (margin collapsing)
1. ์์์ ์์ ์ฌ์ด์ margin-top OR margin-bottom์ ๊ณต๊ฐ์ด ์์๊ฒฝ์ฐ ๋ ๋์ ๊ฐ์ ๋ง์ง์ด ์ ์ฉ
See the Pen Untitled by mandelina (@mandelina) on CodePen.
- ๋ค์ ์ฝ๋๋ฅผ ๋ณด๋ฉด ์ฒซ๋ฒ์งธ div์ margin-bottom : 30px , ๋๋ฒ์งธ div์ margin-top : 60px; ์ด๋ฏ๋ก
๊ทธ๋ผ ์ด 30px + 60px = 90px ๋งํผ์ margin์ด ์๊ธฐ๋๊ฑฐ ์๋๊ฐ? ๋ผ๊ณ ํ ์ ์์ง๋ง
๋ง์ง ๊ฒน์นจ ํ์์ ์ํด 60px ๋งํผ ๋จ์ด์ง๊ฒ ๋๋ค.
์ฆ, 30 <60 ์ด๋ฏ๋ก ๋ ๋์๊ฐ์ธ 60px๋ง ์ ์ฉ๋๊ฒ์ด๋ค!
2. ๋ถ๋ชจ์์์ ์์์์๊ฐ ์กด์ฌํ ๋ , ์์์์์ margin-top OR margin-bottom ๊ฐ์ด
๋ถ๋ชจ์ ๋์ด์ ์ํฅ์ ๋ฏธ์น์ง ์๋ ํ์
See the Pen Untitled by mandelina (@mandelina) on CodePen.
- ํ๋์์ด ๋ถ๋ชจ div , ํํฌ์์ด ์์ div์ด๋ค.
- child์ margin : 50px์ ์ฃผ์๋ค . ์ด๊ฒฝ์ฐ ์์ํ๋ ๊ฒฐ๊ณผ๋ ํ๋์ div์ ํํฌ์ div๊ฐ ์ํ์ข์ฐ๋ก 50px ์ฉ ๋จ์ด์ง๋ ๊ฒ์ ์์ํ ์ ์๋ค .
- ํ์ง๋ง ๊ฒฐ๊ณผ๋ ?? ์ผ์ชฝ ๋ง์ง์ ์ ์ฉ์ด ๋์์ผ๋ ์์๋๋ ๋ถ๋ชจ์ ๊ทธ๋๋ก ๋ถ์ด์๋ค.
์ฆ, ๋ง์ง๊ฒน์นจํ์์ ์ํด .child์์์ ๋ง์ง๊ฐ์ด ๋ถ๋ชจ์์ญ์ ๋์ด์๋๊ฒ์ด๋ค.
3. ํด๊ฒฐ๋ฐฉ๋ฒ
- ๋ถ๋ชจ์์์ overflow : hidden; ์์ฑ ์ง์
- ๋ถ๋ชจ์์์ display : inline-block ์ ์ฉ
- ๋ถ๋ชจ์์์ border๊ฐ ์ ์ฉ
See the Pen Untitled by mandelina (@mandelina) on CodePen.
.
.
.
[์ฐธ๊ณ ]
IE๋ฅผ ์งํจ๋ค๋ฉด overflow: hidden;
IE๋ฅผ ๋ฒ๋ฆฐ๋ค๋ฉด display: flow-root
๊ทธ๋ฌ๋ overflow : hidden ; ์ด ์๋๋ค๋ฉด (์์์ ๋์์ธ์ด ๋์น ๊ฒฝ์ฐ) - ์ค๊ฐ์ table์์๋ฃ๊ธฐ
.parent::before,
.parent::after {
content: ' ';
display: table;
}
'FE > HTML,CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[css] imgํ๋จ์์์ ์๊ธฐ๋ ๋น๊ณต๊ฐ์ ๋ฌด์์ผ๊น ? (2) | 2022.04.07 |
---|---|
[css] ๋จ์ | background | font (0) | 2022.04.07 |
[css] reset css | Vendor-Prefix | Selector์ฐ์ ์์ (4) | 2022.04.06 |
[HTML] table | inline vs block (0) | 2022.04.05 |
[HTML] formํ๊ทธ (0) | 2022.04.05 |