대충 200의 넓이의 div가 있고 그 안에 200넓이의 버튼 이미지를
세로로 5개 넣었다 치면 이미지와 이미지 사이에 5px정도 띄워지는 공간이 생기네요?
왜 그런건가요?
|
답변 3개 / 댓글 5개
채택된 답변
+20 포인트
2016-11-27 (일) 20:13:46
이미지가 inline 엘리먼트라 line height의 영향을 받기때문에 그래요. 이미지에 Display:block 속성을 줘보세요.
답변에 대한 댓글 1개
쌔깜디블랙죠<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개
헐크매니아
2016-11-27 (일) 20:13:34
다른 페이지는 그냥 됬는데 이건 왜 이런지 이해가 안가네요.
그렇게 하나하나 스타일을 지정해주는 수밖에 없는건가요?
아래가 소스입니다.
<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>
그렇게 하나하나 스타일을 지정해주는 수밖에 없는건가요?
아래가 소스입니다.
<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>
쌔깜디블랙죠
2016-11-27 (일) 20:22:42
하나하나 스타일 지정 안하셔도 됩니다.
ID나 class를 이용하시면 됩니다.
다른 페이지는 스타일이 먹힌거고 저부분은 스타일이 안먹혔나보네요
<style>
#num_1 img{
float: left;
width: 210px;
height: 40px;
}
</style>
윗 방식으로 하면 num1 아이디 안에 있는 모든 img를 float: left; width: 210px; height: 40px 로 하는 겁니다.
ID나 class를 이용하시면 됩니다.
다른 페이지는 스타일이 먹힌거고 저부분은 스타일이 안먹혔나보네요
<style>
#num_1 img{
float: left;
width: 210px;
height: 40px;
}
</style>
윗 방식으로 하면 num1 아이디 안에 있는 모든 img를 float: left; width: 210px; height: 40px 로 하는 겁니다.
쌔깜디블랙죠띄워쓰기가 들어간겁니다.
붙이고 싶다면
<img /><img /> 이런식으로 붙여서 표현 해야하는데 그럼 곤란하니까
요소에 float: left를 쓰시고
마지막에 <div style="clear : both;"></div>
를 사용하시면 원하는 결과물이 나올겁니다.
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.