div에 이미지를 넣으면 아래로 공백이 생기는건 뭔가요?
본문
대충 200의 넓이의 div가 있고 그 안에 200넓이의 버튼 이미지를
세로로 5개 넣었다 치면 이미지와 이미지 사이에 5px정도 띄워지는 공간이 생기네요?
왜 그런건가요?
답변 3
감사합니다. 해결됬습니다.
띄워쓰기가 들어간겁니다.
붙이고 싶다면
<img /><img /> 이런식으로 붙여서 표현 해야하는데 그럼 곤란하니까
요소에 float: left를 쓰시고
마지막에 <div style="clear : both;"></div>
를 사용하시면 원하는 결과물이 나올겁니다.
죄송한데 안되네요;;
<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>
다른 페이지는 그냥 됬는데 이건 왜 이런지 이해가 안가네요.
그렇게 하나하나 스타일을 지정해주는 수밖에 없는건가요?
아래가 소스입니다.
<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>
하나하나 스타일 지정 안하셔도 됩니다.
ID나 class를 이용하시면 됩니다.
다른 페이지는 스타일이 먹힌거고 저부분은 스타일이 안먹혔나보네요
<style>
#num_1 img{
float: left;
width: 210px;
height: 40px;
}
</style>
윗 방식으로 하면 num1 아이디 안에 있는 모든 img를 float: left; width: 210px; height: 40px 로 하는 겁니다.
그런 방법도 있군요. 감사합니다.
