margin&padding ๋‹ค๋ฃจ๊ธฐ

๐Ÿ“„ ํ•˜์œ„ ์†์„ฑ ์ •์˜ํ•˜๊ธฐ

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-lefr: 40px;
}

์œ„์™€ ๊ฐ™์ด margin์—๋„ ๋™์ผํ•œ ์ ‘๋ฏธ์‚ฌ๋ฅผ ๋ถ™์—ฌ ๊ฐœ๋ณ„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“„ ์—ฌ๋Ÿฌ ๊ฐ’์„ ํ•œ ๋ฒˆ์— ์ •์˜ํ•˜๊ธฐ

span {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px 20px 30px 40px;
  <!--์ˆœ์„œ: top-right-bottom-left-->;
}

์œ„์™€ ๊ฐ™์ด padding์—๋„ ๋™์ผํ•œ ์ ‘๋ฏธ์‚ฌ๋ฅผ ๋ถ™์—ฌ ๊ฐœ๋ณ„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ถœ์ฒ˜

  • ์œ ๋…ธ์ฝ”๋”ฉ

Leave a comment