[CSS] margin, padding, border, outline

🟦 Margin

• 외부여백
• 지정된 크기를 기준으로 함
• 다른 요소와의 간격/공간을 의미
• 각 요소마다 마진이 부여될 때, 인접한 요소 사이에서는 더 큰 마진값만 적용된다..block_02 {margin : 50px}
  • margin : auto → 좌우에만 자동 적용
  • margin : 20px 10 px → 상하 좌우
  • margin : 20px 10px 25px → 상 좌우 하
  • margin : 20px 10px 25px 15px → 상 좌 우 하
• block 1과 block 2가 옆으로 나란히 정렬되어있을 때, 둘 사이의 마진값은 50px
• ex) .block_01 {margin : 30px}
• float : 요소를 어떻게 배열할 것인지의 기능으로, float 기능을 사용하면, margin 값을 각 요소마다 부여했을 때, 더 큰 마진값만 적용되는 것이 아니라 각각 마진값이 적용된다..block_01 {margin : 30px}block 1과 block 2가 옆으로 나란히 정렬되어있을 때, 둘 사이의 마진값은 30+50 = 80px
• .block_02 {margin : 50px}
• ex) div {float : left}
• 마이너스 값 적용 가능 — 다른 요소와 겹치기 가능
• 마진값은 기본적으로 상하좌우 적용이 되지만, 맨 첫 번째 요소와 마지막 요소는 부모 요소에 붙으려는 성질이 있어서 margin-top / margin-bottom 기능을 부여했을 때, 부모요소를 끌고 같이 상/하로 움직인다.
• ⇒ 부모 요소에 border를 적용하면 마진 기능 적용됨.

 

---

🟦 Padding

• 내부 여백
• 지정된 요소의 크기의 값이 커진듯한 형태 — 박스 자체는 그대로 있고, 밖으로 크기를 적용
• box-sizing : 지정된 박스들을 자기 자신을 기준으로 하여 width, height의 지정값을 기준으로, padding과 border의 값을 정해진 규격 안으로 집어 넣는 것.
  • .block_01 {width : 100px; padding : 10px ; border : 10px;} → 가로 전체 : 140px
  • .block_01 {width : 100px; padding : 10px ; border : 10px; box-sizing : border-box ;} → 가로 전체 : 100px — width만 박스로 봄
  • .block_01 {width : 100px; padding : 10px ; border : 10px; box-sizing : content-box;} → 가로 전체 : 140px — 지정된 모든 값을 박스로 봄
• 패딩은 auto 기능 적용 안됨.
• 마이너스 적용 안됨.

---

🟦 Border

• 부피를 차지하는 외곽선
• 부피가 늘어날 수록 그만큼 다른 요소를 밀어낸다. (자리의 변동)
• border에 따로 기능 적용을 하지 않더라도 하나의 border 안에 여러 개의 값 적용 가능
• ex) border : 30px solid #fff;

---

🟦 Outline

• 보이지만 부피를 차지하지 않는 외곽선
• 다른 요소에 영향을 주지 않는다.
• 다만 outline의 두께가 두꺼워지면서 다른 요소에 겹치게 보일 수 있다. (자리 변동 x)

---

✔️ 번외)

width, height, padding, margin, outline, border를 사용해서 상자모양으로 만들어도 초점이 안 잡히는 <li> 요소 처리 방법

• <a>태그 활용
• <button style=”button”> 태그 활용
• form 내부 요소 활용
• 강제로 저리 (JS에서 제어용으로 사용할 때 쓰는 기능)
  • 요소에 tabindex 속성 부여
    • tabindex=”-1” → focus를 주지 않음 (default)
    • tabindex=”0” → 다른 focus 기능을 가진 요소와 동일 선상에서 focus 처리되는 속성
    • tabindex=”1” → 숫자의 크기에 따라 focus 우선순위 부여

 

• •