로그인, 회원가입후 더 많은 혜택을 누리세요 회원가입 닫기

li 나열시 이미지 사이에 여백없애기

2013.01.17 18:35

조회 수:4070






<li>이미지</li> 나열할때 이미지 사이에 여백이 생기면
li 와 li 사이에 주석표시(<!--  -->)를 넣어주면 공백이 생기지 않는다.


1)  세로로 나열했을때
vertical-align:top 으로 설정하면 문제해결

 

2) 가로로 나열했을때
display:inline; float:left 로 주면 문제해결

display:inline 은 블록요소의 태그를 인라인 요소로 바꿔준다는 뜻.
인라인요소로 바꾸면 줄바꿈하지 않고 한줄로 표시되기 때문.

 

 

 

__________________________________

 

 

 

<li>이미지</li> 나열할때 이미지 사이에 여백이 생기면
li 와 li 사이에 주석표시(<!--  -->)를 넣어주면 공백이 생기지 않는다.


1)  세로로 나열했을때
vertical-align:top 으로 설정하면 문제해결

 

2) 가로로 나열했을때
display:inline; float:left 로 주면 문제해결

display:inline 은 블록요소의 태그를 인라인 요소로 바꿔준다는 뜻.
인라인요소로 바꾸면 줄바꿈하지 않고 한줄로 표시되기 때문.