inline
-
CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법CODING/HTML & CSS 2019. 4. 29. 17:15
display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) Lorem Ipsum Dolor 박스 오른쪽에 여백이 있는데, li 요소에 margin-right: 0px; 를 추가해도 사라지지 않습니다. 이 여백을 없애는 방법 두 가지를 소개합니다. margin 이용하기 첫번째 방법은 margin 값을 음수로 하는 것입니다. -4px 정도면 여백이 사라집니다. li { display: inline; border: 1px solid #bcbcbc; padding: 10px; margin-right: -4px;..