30분경 article 사이의 공백에 대하여

Question

section 밑에 자식요소 article inline -block  주고 부모 요소 section에 text-align:center를 주면 수평정렬 된다는 점  이해했습니다. 근데 article 사이사이 하얀색 여백을 없앨 수는 없나요? li 태그로 가로 정렬되어도 사이사이 여백이 있어서  nav로 만들때 간격이 생기네요..

코딩웍스(Coding Works) · Answer

인라인 블록으로 변경이 되면 우측에 여백이 생깁니다. 그건 폰트관련 사항입니다. 이미지의 경우 우측과 아래쪽에 그런 여백이 생깁니다. 이미지의 경우 없애려면 이미지를 블록 요소로 변경하면 깔끔하게 없어 집니다. 위의 경우 article을 인라인 블록으로 주었을 경우 없애는 방법은 폰트사이즈를 조정하는 방법이 있습니다만... 좀 야매스럽습니다. 그래도 알려드리면... 아래 코드를 보시면 section article을 인라인 블록으로 해서 가로배치와 중앙 정렬을 편하게 할 수 있습니다. 그런데 우측에 생기는 여백은 article의 부모요소인 section 에 font-size: 0; 주면 없어집니다. 그리고 article에 다시 font-size: 16px; 이렇게 주면 됩니다. 좀 야매스럽죠. < html lang = "ko" > < head > < meta charset = "UTF-8" > < title > 인라인 블록으로 변경이 되면 우측에 여백 < style > section { border : 5px solid #000; width : 900px ; text-align : center; font-size : 0 ; } section article { border : 5px solid red; width : 250px ; height : 200px ; display : inline-block; font-size : 16px ; } < body > < section > < article > article #01 < article > article #01 < article > article #01 아래처럼 플렉스를 사용하면 원하는 배치를 더 편하게 할 수 있습니다. section { border : 5px solid #000; width : 900px ; display : flex; justify-content : center; } section article { border : 5px solid red; width : 250px ; height : 200px ; }