inline요소 margin, padding에 관한 질문입니다.
Aileen
안녕하세요 twoshlove입니다. ( __)
다름이 아니라
그 동안 저는 inline요소에 대해
width, height는 조절이 불가하고
margin, padding은 좌우만 적용이 가능한걸로 인식하고 있었는데
inline요소에 padding을 주었을 때 특이한 현상이 일어나네요.
background-color 넣고 확인을 해봤더니
padding의 경우 상하의 공간이 확보되면서 컬러가 들어차네요.
특이한 점은 다른 요소들과의 관계를 보면
inline요소 bg에 color는 들어갔으나
상하padding이 적용 안된 상태로 랜더링이 된다는겁니다.
이렇게 말이죠. 심지어 개발자 도구의 Metrics에서도
이렇게 inline요소(예시에서는 a태그와 span태그를 사용했습니다)의 상하 padding의 존재를 인정하고 있는데
이건 대체 무슨 현상일까요 ?
-
소심한여자
밑에껄로 테스트 해보면 되지요.. inline에 아무런 값이 안들어오면 어떻게 되는지.. 나와도 block 처럼 padding 위 아래 계산되는게 아닌걸로 기억나는데.. 가장 좋은건 만들어보는거죠.
-
연와인
제가 잘 이해가 안가서 그러는데 조금 더 설명을 들을 수 있을까요 ?
inline요소가 값이 들어오기전까지 가로,세로 길이를 알 수 없다는건 알겠는데
padding과 height의 값만큼 인식하고 text가 들어온다는게 어떤 뜻이죠 ( __)?
inline요소는 들어오는 값에 의해서만 width, height를 가지게 되고
margin, padding은 좌우만 적용가능, 상하는 적용불가로 브라우저에 랜더링 되는게
맞지 않나요 ? -
가든
inline은 값이 들어오기전까지 가로,세로가 길이를 알 수 없으니.. w3c 의 근거한 모델에서 padding과 height의 값만큼 인식하고 text가 나와야죠.. w3c 모델에서 말하는 패딩은 그런 형태니까요
-
유진공주
결국 결정적으로 랜더링 자체가 상하 padding을 표현 안해주니
inline요소의 상하 padding은 적용이 안되는거라 보는게 맞는데
일종의 버그일까요. -
맑은
실제적으로 정상적인 block의 패딩이라면 inline 다음에 text가 저런식으로 나오진 않겠죠?
-
떠나간그놈
특이한 현상이져 ㅎㅎ;
-
벛꽃
흐으음..글쎄요 코딩하면서 종종 겪는 현상이긴한데, 한번도 이렇게 스스로 질문을 던져보진 않았던듯해요 ㅠ 랜더링된 꼴은 마치 line-height 처럼 보이네요 =ㅅ=