-
CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법CODING/HTML & CSS 2019. 4. 29. 17:15
display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.)
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> li { display: inline; border: 1px solid #bcbcbc; padding: 10px; } </style> </head> <body> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> </body> </html>
박스 오른쪽에 여백이 있는데, li 요소에
margin-right: 0px;를 추가해도 사라지지 않습니다. 이 여백을 없애는 방법 두 가지를 소개합니다.
margin 이용하기
첫번째 방법은 margin 값을 음수로 하는 것입니다. -4px 정도면 여백이 사라집니다.
li { display: inline; border: 1px solid #bcbcbc; padding: 10px; margin-right: -4px; }
글자 크기 조정하기
두번째 방법은 글자 크기를 조정하는 것입니다. 상위 요소의 글자 크기를 0으로 만든 다음 li 요소의 글자 크기를 원래대로 만듭니다.
ul { font-size: 0; } li { display: inline; border: 1px solid #bcbcbc; padding: 10px; font-size: 16px; }이 때 ul 요소의 여백도 바뀐다는 것에 주의해야 합니다.
참고
display 속성 대신 float 속성을 사용하면 여백이 생기지 않습니다.
ul { list-style-type: none; } li { float: left; border: 1px solid #bcbcbc; padding: 10px; }
출처 : CODING FACTORY https://www.codingfactory.net/10814
