인프런 커뮤니티 질문&답변
작성한 질문수
자식요소가 인라인블럭일때 아래 틈 없애는 방법 알려주세요
작성
·
409
1
<body>
<div class="parent">
<span class="child"></span>
</div>
</body>
---------------------------------------
.parent {
border: 5px solid red;
width: 600px;
overflow: hidden;
text-align: center;
}
.child {
background-color: gold;
width: 200px;
height: 200px;
display: inline-block;
}
일때 자식이 중앙정렬은 되는데 자식요소와 보더 사이에 틈이 있는데
이거 없애는 방법 있을거 같은데 안되네요
도와주세요 ㅠ
답변 1
0
코딩웍스(Coding Works)
지식공유자
아래코드 보시면 인라인 블록일 때는 가로배치를 쉽게 하는 대신에 오른쪽과 아래에 4픽셀 정동의 폰트 관련 마진이 생깁니다. 만약 정확하게 하고 싶으면 인라인블록이 아니라 float를 사용하세요.
그런데 오른쪽과 아래를 정교하게 맞춰야 하는 경우가 아니면 크게 신경 쓸 필요없습니다.
아래 코드처럼 마진을 마이너스 값으로 줘서 강제로 마진을 없애시는 방법이 있습니다.
참고로 웹디자인 기능사 시험보실 때 레이아웃은 꼭 float로 잡으세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
border: 5px solid red;
width: 600px;
/* overflow: hidden; */
text-align: center;
}
.child {
background-color: gold;
width: 200px;
height: 200px;
display: inline-block;
margin-bottom: -4px;
}
</style>
</head>
<body>
<div class="parent">
<span class="child"></span>
<!-- <span class="child"></span> -->
</div>
</body>
</html>