TIL 6 | CSS_Margin과 Padding

이전 사전 스터디때 공부했던 내용으로,
새롭게 알게된 내용만 파악하고 넘어가자!

---

Margin과 Padding

클라이언트에게 보여지는 화면

개발자도구에서 확인 가능한 margin

👉   273px이라는 가로 값은 border와 padding이 합쳐진 가로 길이

👉   margin까지 합쳐진 가로의 길이는 373px

👉    순수내용(파란색영역)의 길이는 273px에서 border(-10)와 padding(-100)을 제외한 163px

 

p.example {
  width: 273px;
  height: 90px;
  margin: 50px;
  border: 5px solid black;
  padding: 50px;
}

---

 Margin (주황영역)

p.example {
  margin: 50px;
}

margin에 50px값을 주면 테두리 사방으로 여백이 생긴다.
즉, 위 코드를 풀어쓰면 아래와 같다.

p.example {
  margin: 50px 50px 50px 50px;
}

👉  순서대로, 위, 오른쪽, 왼쪽, 아래
위 코드를 한번더 풀어쓰면 아래와 같다! Those are all the same codes!!

p.example {
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
}

---

 Padding (초록 영역)

 

p.example {
  padding: 50px;
}

p.example {
  padding: 50px 50px 50px 50px;
}

p.example {
  padding-top: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

👉 Padding 또한 Magin과 비슷하다~!!   Those are all the same codes!!

 

 

---

Melody's Memo

padding 과 margin에 값 줄때의 순서를 잘 기억하자!

👆위 , 👉오른쪽, 👈왼쪽, 👇아래...

 

🧐 새롭게 알게된 사실

파란 영역 안에 써진 273 x 90이 이전에는 그저 순수한 파란 색 부분의 크기인줄 알았는데,,,,

padding과 border의 값을 합한 크기였다...!!

 

그래서  사전스터디 과제로 자기소개 웹페이지 만들때  내가 원하는 대로 여백이 설정이 안되었군⁉️