테스트 사이트 - 개발 중인 베타 버전입니다

div에 이미지를 넣으면 아래로 공백이 생기는건 뭔가요? 채택완료

헐크매니아 8년 전 조회 4,298

대충 200의 넓이의 div가 있고 그 안에 200넓이의 버튼 이미지를

세로로 5개 넣었다 치면 이미지와 이미지 사이에 5px정도 띄워지는 공간이 생기네요?

왜 그런건가요?

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
8년 전
이미지가 inline 엘리먼트라 line height의 영향을 받기때문에 그래요. 이미지에 Display:block 속성을 줘보세요.
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

헐크매니아
8년 전
감사합니다. 해결됬습니다.

댓글을 작성하려면 로그인이 필요합니다.

<div style="display: inline-block; width: 200px;">

<img style="float: left;" />

<img style="float: left;" /> 

<img style="float: left;" /> 

<img style="float: left;" /> 

<img style="float: left;" /> 

 

<div style="clear:both;"></div>

</div>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

헐크매니아
8년 전
다른 페이지는 그냥 됬는데 이건 왜 이런지 이해가 안가네요.
그렇게 하나하나 스타일을 지정해주는 수밖에 없는건가요?
아래가 소스입니다.

<body>
<div id="wrap">
<div id="num1"><img src="m1.jpg" width="210" height="40"/><img src="m1.jpg" width="210" height="40"></div>
<div id="num3"></div>
<div id="num2"></div>
</div>

</body>
쌔깜디블랙죠
8년 전
하나하나 스타일 지정 안하셔도 됩니다.
ID나 class를 이용하시면 됩니다.
다른 페이지는 스타일이 먹힌거고 저부분은 스타일이 안먹혔나보네요

<style>
#num_1 img{
float: left;
width: 210px;
height: 40px;
}
</style>
윗 방식으로 하면 num1 아이디 안에 있는 모든 img를 float: left; width: 210px; height: 40px 로 하는 겁니다.
헐크매니아
8년 전
그런 방법도 있군요. 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

띄워쓰기가 들어간겁니다.

 

붙이고 싶다면

 

<img /><img /> 이런식으로 붙여서 표현 해야하는데 그럼 곤란하니까

 

요소에 float: left를 쓰시고

 

마지막에 <div style="clear : both;"></div>

를 사용하시면 원하는 결과물이 나올겁니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

헐크매니아
8년 전
죄송한데 안되네요;;

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인