[공통] inline요소 사이의 없어지지 않는 간격 해결법.

출처 : https://sudalog.tistory.com/63

[공통] inline요소 사이의 없어지지 않는 간격 해결법.

 

div 요소 안에 <button>요소 여러개를 배열해 놓았다.

button은 기본적으로 default값이 inline-block;요소이다. 즉, 제 영역값은 가지지만 block이 아니기에 가로로 배열이 된다는 말이다.

문제는 margin, padding을 0으로 줘도 없어지지 않는 간격이 버튼요소 오른쪽에 남아있었다.

개발자도구로 요소를 찍어봐도 적용되는 css가 없으니, 곡할 노릇.

이걸 1px의 여백도 없이 붙여야 하는데, 이걸 어쩌나...

 

역시 구글은 최고의 선생이다.

적당한 방법을 찾았다.

 

Tips > display 속성값을 inline 또는 inline-block으로 했을 때 여백 조정

display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다.

이 때 요소와 요소 사이에 여백이 생깁니다.

여백이 있는데,그 요소에

margin-right: 0px;

를 추가해도 사라지지 않습니다.

 

이 여백을 없애는 방법은 두가지입니다. 첫번째 방법은 margin 값을 음수로 하는 것입니다.

(난, 이 방법으로 해결~ margin-left: -4px;)

두번째 방법은 글자 크기를 조정하는 것입니다. 상위 요소의 글자 크기를 0으로 만든 다음 해당 요소의 글자 크기를 원래대로 만듭니다.

이 때 상위 요소의 여백도 바뀐다는 것에 주의해야 합니다.

 

참고로..** display 속성 대신 float 속성을 사용하면 여백이 생기지 않습니다.

 

글 출처 : http://www.cmsfactory.net/node/10411