인프런 커뮤니티 질문&답변
작성한 질문수
질문있습니다
작성
·
156
0
안녕하세요 선생님
해당 강의 4:42 부분에서 개발자 도구를 열어 확인 시, .container의 content 높이가 106px로 보입니다
.item의 content 높이가 102px인데 .container의 content 높이가 102px이 아닌 106px로 나오는 이유가 무엇인지 궁금합니다
답변 1
0
잔재미코딩 DaveLee
지식공유자
안녕하세요.
container 같은 경우는 별도로 height 를 지정하지 않았기 때문에, 이 경우, div 가 block 요소 이면, 브라우저와 PC 환경에 따라 디폴트 height 가 자동으로 적절히 지정됩니다. 그래서, 106px 로 나오는 것으로 이해가 됩니다. 저같은 경우는 109px 로 나오더라고요. 딱 맞게 지정하고 싶으시다면, 다음과 같이 container 에 height 를 102px 로 명시적으로 지정하시면, 딱 맞게 지정도 가능합니다.
감사합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
.container {
border: 1px solid red;
height: 102px;
}
.item {
border: 1px solid blue;
width: 100px;
height: 100px;
border-radius: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>