HTML-CSS div가 자식보다 3px 높습니다.

Question

이미지 또는 iframe 일 수있는 하나의 하위 요소가 포함 된 동일한 클래스의 여러 div를 사용하는 프로젝트에서 작업하고 있습니다. 높이가 지정되지 않았습니다. 컨테이너 div가 자식 요소의 높이가되도록하고 싶지만 기본 높이는 자식보다 3px 높습니다.

http://jsfiddle.net/52me041n/2/에서 문제를 보여주는 JSfiddle이 있습니다.

HTML :

<div class="outside"> 
    <img class="inside" id="pic" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fblogs.cisco.com%2Fwp-content%2Fuploads%2Fclouds.png&f=1" height="200px"/> 
</div> 
<br/> 
<div class="outside"> 
    <iframe class="inside" width="420" height="315" src="//www.youtube.com/embed/VwTnyRHEZSQ" frameborder="0" allowfullscreen></iframe> 
</div> 

CSS :

.outside{ 
background-color: red; 
} 

나는 그냥 CSS와 적당한 높이로 사업부를 설정 가능 여부를 알고 싶습니다, 그렇지 않은 경우, 어떻게 오른쪽으로 그것 JS와 함께.

Answer 1

바이올린을 업데이트했습니다. http://jsfiddle.net/52me041n/3/

사용 -

img, iframe { 
    display: block; 
} 

Answer 2

당신은 부모 DIV 내 어린이를위한 차단하기 위해 디스플레이 속성을 설정해야합니다. 연습으로 나는 항상 여백과 패드도 0으로 설정합니다. 들어 바이올린 here

.outside > * { 
    margin: 0; 
    padding: 0; 
    display: block; 
} 

Answer 3

"나는 그냥 CSS와 적당한 높이로 사업부를 설정 가능 여부를 알고 싶습니다, 그렇지 않은 경우, 어떻게 JS와 함께 오른쪽으로." < == 네,

<div id="cntr"> </div> 

CSS :

#cntr { width : 100px; height : 100px; overflow : hidden; } /* overflow may have other values also like hidden, auto, scroll 

*/

Answer 4

이 코드를 사용해보십시오. Fiddle

.outside 
{ 
    background-color: red; 
    display: block; 
} 
.outside img, iframe { 
    float: left; 
} 

Answer 5

이미지가 텍스트와 동일한 기준에 없습니다.

당신이 무슨 뜻인지에 정교한 당신 IMG CSS의

fiddle