블록 요소와 인라인 요소 사이의 공백에 대한 질문
182
작성한 질문수 2
선생님 질문이 있습니다!
블록 요소랑 인라인 요소를 배치하면서 연습하고 있는데요
블록 요소 안쪽에 인라인 요소를 배치하면
첨부 이미지 아래쪽 녹색 부분에 약간 공백같은게 생기는데
이유를 모르겠어요.
패딩이랑 마진을 0씩 줘도 없어지지가 않는데
혹시 패딩 마진 이외에 나중에 배우는 내용이면
나중에 배운다고만 알려주시면 감사하겠습니다!
- HTML 소스 -
<div class="parent">
<div class="child"></div>
</div>
- CSS 소스 -
.parent {
border: 1px solid black;
text-align: center;
}
.child {
border: 1px solid red;
width: 100px;
height: 100px;
display: inline-block;
}답변 1
1
인라인블록에서 아래에 생기는 마진은 텍스트 관련 마진입니다.
이미지도 마찬가지로 아래에 마진이 생깁니다.
이런 마진은 폰트관련 마진입니다.
인라인 블록은 인라인 성질을 가지고 있기 때문에 인라인이 가진 텍스트 관련 속성이 남아 있어요.
그래서 아래처럼 font-size: 0를 넣어주면 됩니다.
하지만 실무에서 font-size: 0로 아래 마진을 하는 경우는 거의 없습니다.
.child에 크기값을 주고 margin: auto 또는 parent에 플렉스로 justify-content: center 이렇게 배치합니다.
지금 사항은 크게 중요한 핵심사항은 아니니까 아~ 그렇구나 정도로 넘어가시면 됩니다.
class 값 한 번에 부여하는법
2
95
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
79
1
div#css-checker-widget의 해결방
1
71
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
94
2
강의듣는법
1
86
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
75
2
input checked 질문합니다.
0
81
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
152
2
Part 1 영상 안나옵니다
1
97
1
제이쿼리 작동이 안됩니다
1
211
3
강의 내용 질문있습니다.
1
128
2
일정 부분만 주석하는 방법
1
222
2
폰트어썸
1
144
2
인접선택자에 대한 질문드립니다!
1
135
2
delay 적용 안됨
1
137
1
rotateY(360deg)가 적용이 안됩니다!
1
190
2
세로이동할때 height값
1
142
2
폰트어썸이 안되요..
1
504
2
화면 정중앙에 오게끔 할수있나요?
1
175
1
어코디언 네비게이션 중
1
127
1
라이브서버 문제
1
241
2
넷플릭스 어코디언 예제 질문
1
107
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
163
1
active 관련 질문
1
149
2