div 내부의 이미지에 이미지 아래에 여분의 공간이 있습니다.

div 내부의 이미지에 이미지 아래에 여분의 공간이 있습니다.

다음 코드에서는 왜 높이가div의 높이보다 크다.img이미지 아래에 틈이 있지만, 패딩/마진은 아닌 것 같습니다.

이미지 아래의 공백 또는 여백은 무엇입니까?

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

기본적으로 이미지는 문자처럼 인라인으로 렌더링되므로 a, b, c 및 d가 있는 같은 줄에 배치됩니다.

g, j, p, q와 같은 문자에 있는 하위 항목을 위한 공백이 이 행 아래에 있습니다.

다음과 같은 작업을 수행할 수 있습니다.

• 이미지를 다른 위치에 배치하도록 조정합니다(예:middle) 또는
• 을 변경하다display인라인이 아니에요.

div {
  border: solid black 1px;
  margin-bottom: 10px;
}

#align-middle img {
  vertical-align: middle;
}

#align-base img {
  vertical-align: bottom;
}

#display img {
  display: block;
}

<div id="default">
<h1>Default</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

<div id="align-middle">
<h1>vertical-align: middle</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
  
  <div id="align-base">
<h1>vertical-align: bottom</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>

<div id="display">
<h1>display: block</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

---

포함된 이미지는 공용 도메인이며 Wikimedia Commons에서 제공됩니다.

이 블로그 투고에서 제안하는 또 다른 옵션은 이미지의 스타일을 다음과 같이 설정하는 것입니다.style="display: block;"

빠른 수정:

이미지 아래의 간격을 제거하려면 다음을 수행합니다.

• 이미지의 수직 정렬 속성을 다음과 같이 설정합니다.vertical-align: bottom; vertical-align: top;또는vertical-align: middle;
• 이미지 표시 속성 설정display:block;

라이브 데모는 다음 코드를 참조하십시오.

#vAlign img {
  vertical-align :bottom;
}
#block img{
  display:block;
}

div {border: 1px solid red;width:100px;}
img {width:100px;}

<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

---

설명: 이미지 아래에 공백이 있는 이유는 무엇입니까?

이미지 아래의 공백이나 여분의 공간은 버그나 문제가 아니라 기본 동작입니다.근본 원인은 이미지가 치환된 요소이기 때문입니다(MDN 치환된 요소 참조).이것에 의해, 「이미지와 같이 행동」해, 고유의 치수, 종횡비…를 가질 수 있습니다.
브라우저는 표시 속성을 다음과 같이 계산합니다.inline하지만 그들은 그들에게 특별한 행동을 주어서 그들을 더 가깝게 만든다.inline-block요소를 수직으로 정렬할 수 있으므로 높이, 위쪽/아래쪽 여백 및 패딩, 변환...을 지정할 수 있습니다.

또, 다음과 같은 의미도 있습니다.

<img>에는 기준선이 없기 때문에 이미지가 수직 정렬: 기준선을 사용하여 인라인 형식 컨텍스트에서 사용되는 경우 이미지 하단이 텍스트 기준선에 배치됩니다.
(출처: MDN, mine 강조)

브라우저는 기본적으로 수직 정렬 속성을 기준선에 맞게 계산하므로 이것이 기본 동작입니다.다음 이미지는 텍스트에서 기준선의 위치를 보여 줍니다.

(이미지 소스)

기준선 정렬 요소는 기준선 아래로 확장되는 하위 요소를 위한 공간을 확보해야 합니다(예:j, p, g ...)를 참조해 주세요.이 설정에서는, 다음의 예와 같이, 이미지의 하단이 베이스 라인에 정렬됩니다.

div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}

<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>

---

에, 「」의 디폴트 은 「」<img>이치노또한 수직 정렬 속성 또는 디스플레이 속성을 변경하면 다음 데모에서와 같이 컨테이너가 제거됩니다.

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}

<p>Default:</p>
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

부모의 회선 높이를 무효로 할 수도 있습니다.

#wrapper {
  line-height: 0;
}

모든 수정: http://jsfiddle.net/FaPFv/

이 속성을 할당하기만 하면 됩니다.

img {
    display: block;
}

기본적으로 이미지에는 다음 속성이 있습니다.

img {
    display: inline;
}

이 문제에 대해서는 다음과 같은 몇 가지 방법을 사용할 수 있습니다.

1. 「」를 사용합니다.line-height

   #wrapper {  line-height: 0px;  }
   

2. 「」를 사용합니다.display: flex

   #wrapper {  display: flex;         }
   #wrapper {  display: inline-flex;  }
   

3. 「」를 사용합니다.display: block,table,flex ★★★★★★★★★★★★★★★★★」inherit

   #wrapper img {  display: block;    }
   #wrapper img {  display: table;    }
   #wrapper img {  display: flex;     }
   #wrapper img {  display: inherit;  }
   

하였습니다.line-height:0나한테는 잘 먹혀요

이미지에서는 display:block; 와 텍스트에서는 vertical-align:top; 를 사용하여 동작합니다.

.imagebox {
    width:200px;
    float:left;
    height:88px;
    position:relative;
    background-color: #999;
}
.container {
    width:600px;
    height:176px;
    background-color: #666;
    position:relative;
    overflow:hidden;
}
.text {
    color: #000;
    font-size: 11px;
    font-family: robotomeduim, sans-serif;
    vertical-align:top;
    
}

.imagebox img{ display:block;}

<div class="container">
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
</div>

또는 JS FILED 코드를 편집할 수 있습니다.

덧붙였습니다.float:left가 있었다.

, 정도능가 you you정 you you you you you 。overflow: hidden;용기의 경우 이미지 높이를 100% 이상으로 높입니다. height: 100%;

언급URL : https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image