wrkbrs
[CSS] display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법 본문
inline 또는 inline-block의 여백
display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.)
박스 오른쪽에 여백이 있는데, li 요소에
를 추가해도 사라지지 않습니다. 이 여백을 없애는 방법 두 가지를 소개합니다.
margin 이용하기
첫번째 방법은 margin 값을 음수로 하는 것입니다. -4px 정도면 여백이 사라집니다.
글자 크기 조정하기
두번째 방법은 글자 크기를 조정하는 것입니다. 상위 요소의 글자 크기를 0으로 만든 다음 li 요소의 글자 크기를 원래대로 만듭니다.
이 때 ul 요소의 여백도 바뀐다는 것에 주의해야 합니다.
참고
display 속성 대신 float 속성을 사용하면 여백이 생기지 않습니다.
https://www.codingfactory.net/10814
'CSS' 카테고리의 다른 글
| <CSS> display: inline 과 inline-block 차이 / 인라인 인라인블록 차이 (0) | 2019.08.13 |
|---|---|
| [CSS] 요소별 수직, 수평 정렬 방법, 수평 수직 정렬 (0) | 2019.08.13 |
| CSS Layout : float, clear, overflow (0) | 2019.04.25 |
| CSS Color Picker Reference site ( CSS 컬러 참고 사이트) (0) | 2019.04.18 |
| HTML 속성 position 이동 relative, fixed or absolute (0) | 2019.01.14 |