display: inline-block 여백이 생기는 현상
Study/Markup
2017. 1. 5. 13:51
1. 문제 발생 (예제)
1000px 로 설정한 div를
다시 150px, 700px, 150px 로 나누고
안쪽의 div에는 display: inline-block 속성을 주었는데
맨 오른쪽 div 영역이 아래쪽으로 밀려내려감
*** div의 padding과 margin, border는 모두 0px 이었음
2. 원인
<div> 태그 등으로 다른 태그들을 묶어주는 경우,
div 태그 또한 inline-element로 인식을 하기 때문에
div들끼리 마주하는 부분에서 여백이 생김
div 뿐만아니라, span도 마찬가지
3. 해결 방법
1)
.container { // 부모 랩퍼
...
font-size: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}
.container > div { // 간격이생기던 엘리먼트
...
font-size: 15px;
letter-spacing: 1em;
word-spacing: 2em;
}
감싸고 있는 div에 font-size, letter-spacing, word-spacing을 0px로 줄임 ->
안쪽의 div에서 복구.
2)
.container > div { // 간격이생기던 엘리먼트
...
float:left;
}
참고
http://comajava.blogspot.kr/2013/12/display-inline-block-width-margin-css.html
'Study > Markup' 카테고리의 다른 글
display,visibility 속성 정리 (0) | 2017.01.05 |
---|---|
display: inline-block 여백이 생기는 현상 (0) | 2017.01.05 |
중요한 개인정보는 필요한 경우가 아닌 경우 적지 마시고, 적으셨다면 비밀글 설정을 꼭 해주시기 바랍니다.
스팸 필터 정책에 의해 영문만으로 작성된 글이나 무의미한 내용의 글은 등록이 되지 않을 수도 있습니다.
스팸 필터 정책에 의해 영문만으로 작성된 글이나 무의미한 내용의 글은 등록이 되지 않을 수도 있습니다.