Html/Css. img box

block 태그인 div에 img를 넣으면 div와 img사이에 유격이 생긴다.
이 유격을 없애보자

방법 1

부모의 태그에 line-height:0 을 준다.

<div>
  <img src="">
 </div>

div{
  line-height:0;
}
div > img{
  width: 100%;
}

방법 2

• 지금의 유격은 div는 display:block;이고 img는 display:inline-block;이라서 생기는 유격이다.
• 그래서 이미지를 display:block;을 주고 width : 100%를 주면 된다.
• 이방법을 많이 쓴다.

<div>
  <img src="">
 </div>

div{
  
}
div > img{
  width: 100%;
  display:block;
}

라이브러리로 만들기.

• 효과 : 태그에 가지고 있는 이미지를 블록으로 만든다.
• 이미지 주변에 애매한 여백이 없어진다.

<div class="img-box">
  <img src="">
 </div>

.img-box > img{
  width: 100%;
  display:block;
}