CSS ~ padding & margin ~

이전 기사에서 CSS를 작성하는 방법을 출력했습니다.
무슨 말하는 분은 이전 기사를 봐주세요!
htps : // 코 m / 아카리 _0618 / ms / 1 바보 bc0 아 4946 d2 9 아 6
그럼, 빨리 가자 ☺️

padding이란?



애초에 padding은 뭐라고 해 생각해요. 나도 생각했다. 처음에 통과했습니다.
하지만 의외로 알면 재미있었기 때문에 함께 배우고 갑시다.
padding이란 간단하게 말하면 문자 안쪽의 여백 같은 것입니다만, 어휘력이 굉장하지 않으므로, 실제로 해 갑시다.
이전 기사에서는 마지막 이런 형태가 되었다고 생각하므로 여기에서 시작해 갑시다.


style.css
h1 {
  color: black;
  font-size: 40px;
  background-color: red;
  width: 15%;
  padding: 10px 20px 10px 20px;
}


조금 설정을 변경했습니다.
화면에서 이렇게 되었습니까?
안쪽의 폭을 취하고 싶은 경우에 사용합니다!



padding 어쩐지 알게 된 곳에서 다음은 margin 해 갑시다!

margin이란?



margin을 배우고 가자!
이쪽은 외측의 여백을 취하고 싶을 때에 사용합니다!
그럼 이제 빨리 가자!

style.css
h1 {
  color: black;
  font-size: 40px;
  background-color: red;
  width: 15%;
  padding: 10px 20px 10px 20px;
  margin: 30px 20px 10px 40px;
}

이렇게 되었습니까?


padding&margin을 지정하는 방법



style.css
padding:10px;
 こちらは4辺すべての指定になります
padding:10px 20px;
 こちらは10pxが上と下、20pxが左右の指定になります
padding:10px 20px 30px;
 こちらは10pxが上、20pxが左右、30pxが下の設定になります
padding:10px 20px 30px 40px;
 こちらは10pxから時計回りに設定されています

개인적으로 margin 쪽이 알기 쉽다고 생각했습니다만, 30분 전까지 차이를 몰랐습니다만, 곧 알게 되었으므로 여러분도 꼭 공략해 봅시다☺️

다음은 border에 대해 배워 갑니다 👍

좋은 웹페이지 즐겨찾기