TIL-24.04.23

 

 

문제점

css로 html요소들을 스타일링 하던 중 <a>태그에 margin-top 값을 주어도 적용이 되지않는 것을 발견.

또한, padding-top 값을 주었더니 위의 <p>를 덮어버리는 현상이 발생했다.

<p>태그와 같은 block 요소에는 정상적으로 margin-top 값이 적용되었기에, 원인이 <a>태그가 inline속성이기 때문일까? 생각하고 구글링을 했다.

인라인 요소는 비대체 인라인요소, 대체 인라인요소 2가지로 분류된다는 사실이다. 이건 그동안 내가 몰랐던 사실이다.

그동안 인라인요소는 단순히 나란히 위치할수있는 요소 정도로만 생각했었다..

 

 

1. 비대체 인라인 요소

   - 비대체 인라인 요소에 세로 마진(margin)을 적용 할 수 없는 이유는 이들 요소가 문서의 텍스트흐름과 직접적으로 연관되어 있기 때문.

이 요소들은 텍스트의 일부로 간주되어 그 높이가 텍스트 라인 자체에 의해 제한되므로, 세로 마진이 라인 박스의 크기를 변경하지 못한다.

ex) <a>, <span> 등이 여기에 속한다.

--> 세로마진을 주고 싶으면 해당 태그의 display속성을 inline-block로 변경하면된다.

 

2. 대체 인라인 요소

   - 대체 인라인 요소는 독립적인 블록(block) 모델의 특성을 가지므로, 세로 마진(margin)을 사용하여 주변 요소로부터 위아래 공간을 확보 가능하다.

ex) <img> 등

 

 

 

 

 

+추가

margin에 관해 이어서 알아보던 중, '마진 상쇄'라는 것도 새롭게 알았다.

 - 마진 상쇄 : 블록(block) 요소 사이에서의 여백 결정 과정(수직여백)에서 여백 겹침 현상이 발생.

즉, 블록 요소 사이에 수직여백이 존재하면 두 요소 사이에 정의된 수직여백 수치 값중 더 큰 값이 우선적용된다는 것.

cf) 수평 여백은 해당❌ , inline,inline-block ❌, 오로지 block요소들 사이에서만

 

 

 

 

 

알게된점

모르는것이 아직도 많다. 모르는 걸 모른채 넘어가지 말고 내것으로 만들어야겠다.