왜 article 태그가 자손 img 태그에 영향을 받는지 모르겠어요.
조회수 476회
https://repl.it/@hyperhand9/CssExercise
위 링크에 간단히 제가 작성한 html, css 소스코그가 있는데 html 코드 내에 img 태그가 한군데 들어갑니다. 그런데 img 태그만 들어가면 이상하게도 조상 article 태그가 아래로 확 내려와 버립니다. 내려오는 길이는 바로 옆 div 태그 높이만큼 내려오네요. 절대 마진이나 패딩이나 들어가지도 않았는데 자식 div 내에 img 태그 하나 들어갔다고 왜 조상까지 영향을 받는지 이유를 못찾겠습니다. 고수님들 답변 부탁드립니다. C#, C++만 하다가 웹쪽 개발 공부하고 있는데 html, css 절대 쉽지 않네요.
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
img는 인라인 블록 요소라서, 그 상위 요소인article의 텍스트 라인을 기준선으로 사용합니다. 그걸 감싸고 있는article까지 인라인 블록 요소가 되면,article은 역시 그 상위 요소의 텍스트 라인을 기준으로 삼게 되는 거구요. 그래서 지금처럼 세로 정렬이 엉망진창(?)이 됩니다.구획을 나누는 요소라면 그냥
display: block;주시면 됩니다. 일단 이렇게 고쳐보시고, 그 결과가 원하셨던 것인지 확인 부탁드립니다.section > article { /* display: inline-block; */ display: block; }
댓글 입력