[HTML & CSS] inline-block 여백제거

[inline-block 줄바꿈 복습]

[브라우저에서 텍스트 취급받는 display 속성값]

• inline
• inline-block
• 텍스트에 자간, 행간과 같은 여백이 있듯이 두 속성값도 여백이 생긴다.

 

[브라우저에서 도형 취급받는 display 속성값]

• block
• flex

See the Pen inline-block 줄바꿈 복습 by psm817 (@psm817) on CodePen.

 

 

[inline-block 여백제거]

[여백속성]

• margin : 클릭되지 않는 범위에 사용되는 여백 속성, 적용하면 적용한 태그 너비,높이에 포함되지 않는다. 오브젝트와 오브젝트 사이를 구분할 때 사용한다. (태그와 태그 사이의 여백)
• padding : 클릭되지 않는 범위, 클릭이 되야하는 범위에도 사용되는 여백 속성 (태그의 테두리 안에 여백을 넣어주는거), 적용하면 적용한 태그 너비높이에 포함된다. 버튼과 아이콘에 많이 사용된다.

 

• inline-block의 여백을 없애기 위해서 상위 엘리먼트 container에 font-size를 0으로 준다.
• container에 font-size를 0으로 주게 되면 폰트 속성 때문에 하위엘리먼트는 상위엘리먼트의 값을 100% 상속받게 되어 inline-block의 여백이 없어지게 된다.
• 하위엘리먼트(color) 각 태그에 font-size를 0으로 지정할 수 없는 이유는 해당 태그 아래 텍스트에 영향을 미치기 때문이다.
• 하위엘리먼트에 font-size를 0으로 지정하게 되면 해당 태그의 텍스트의 크기도 0이 되기 때문에 눈에 보이지 않는다.

 

예시) 상위엘리먼트 container에 font-size를 0으로 주면 하위엘리먼트 class는 자동으로 font-size를 0으로 상속받는다. 여기서 하위엘리먼트의 font-size 속성을 따로 16px로 준다면 해당 태그의 텍스트에는 0px가 아닌 16px를 상속받게된다.

 

See the Pen inline-block 여백제거 by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 6일차 복습 by psm817 (@psm817) on CodePen.