왜이 마진이 부모 바깥으로 흐르고 있습니까?

Question

나는 div가 mainlogo 로고 안에 다른 div 안에 있습니다. 자, 내가 위에 여백을 줄 때, 그것은 바깥 쪽 divs 외부로 흐릅니다. 내가 원하는 것은 그것이 마진 - 상단을 줄 때 부모의 바깥쪽으로 마진을 흘리지 않고 스스로를 아래쪽으로 옮겨야한다는 것입니다.

.header { 
 
    width: inherit; 
 
    height: 100px; 
 
    background-color: #0080FF; 
 
    box-shadow: 0.5px 0.5px 0.5px 0.5px grey; 
 
} 
 
.headerdiv img { 
 
    width: 80px; 
 
} 
 
.headerdiv { 
 
    width: 1020px; 
 
    margin: 0 auto; 
 
    height: inherit; 
 
    position: relative; 
 
} 
 
#mainlogo { 
 
    height: 80px; 
 
    width: 350px; 
 
    margin-top: 10px; 
 
}

<div class="header"> 
 
    <div class="headerdiv"> 
 
    <a href="onlinequiz login.php"> 
 
     <div id="mainlogo"> 
 
     <img src="Images/logo.png"></img> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>

왜 발생합니까 내가 그것을 어떻게 해결할 수 있습니까?

Answer 1

까다로운 마진 사양을 작동합니다. This page에는 실행중인 동작에 대한 아주 좋은 설명이 있습니다. #mainlogo 공백을 padding으로 변경하고 싶지 않은 경우 .header에 overflow: hidden 속성을 지정하면 여백 축소를 해결할 수 있습니다. 또한

.header { 
 
    width: inherit; 
 
    height: 100px; 
 
    background-color: #0080FF; 
 
    box-shadow: 0.5px 0.5px 0.5px 0.5px grey; 
 
    overflow: hidden; 
 
} 
 
.headerdiv img { 
 
    width: 80px; 
 
} 
 
.headerdiv { 
 
    width: 1020px; 
 
    margin: 0 auto; 
 
    height: inherit; 
 
    position: relative; 
 
} 
 
#mainlogo { 
 
    height: 80px; 
 
    width: 350px; 
 
    margin-top: 10px; 
 
}

<div class="header"> 
 
    <div class="headerdiv"> 
 
    <a href="onlinequiz login.php"> 
 
     <div id="mainlogo"> 
 
     <img src="Images/logo.png"></img> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>

, 당신은 span과에 #mainlogo div을 변경하는 것이 좋습니다 자동 폐쇄 예측하지 못한 크로스 브라우저의 단점을 피하기 위해 img 태그를.

Answer 2

beacuse 당신은 일반화 된 DIV를 그대로 사용하고 있습니다. 즉 플로트 부동 재산 사용 :이,

를 떠나이 같은

,

#mainlogo { 
    float:left; 
    height: 80px; 
    width: 350px; 
    margin-top:20px; 
} 

Answer 3

시도해보십시오. headerdiv의 position 속성을 position : absolute로 설정하십시오.

.headerdiv { 
    width: 1020px; 
    margin: 0 auto; 
    height: inherit; 
    position: absolute; 
}