문제의 왼쪽 - 두 번째는 마진 탑을 가지고HTML/CSS를 자극 기본 동작 여기
지금, 왜 않는 이유 그 margin-top은 첫 번째 div에도 적용됩니까?
다음은 아이디어를 얻을 배경 색상 데모입니다 :
http://dl.dropbox.com/u/4225936/whyyyyy.htm
- 편집 : 나는 해결책을하지만이 동작에 대한 설명을 찾는 게 아니에요. 감사합니다 모두 :
실행중인 제품을 사용할 수 있습니다.
두 개의 여백이 인접한 경우 큰 것이 우선합니다. 두 번째 div의 여백이 컨테이너 div의 여백에 인접하기 때문에이 여백이 축소되고 큰 여백 (50 픽셀)이 우선 적용되며 둘 모두에 영향을줍니다.
컨테이너에 위쪽 패딩을 추가하면 여백이 더 이상 인접하지 않으므로 효과가 제거됩니다.
편집 : "큰"은 때로는 정확하지 않을 수 있습니다. 예를 들어, 음수 여백은 0 여백보다 우선합니다. 나는 계산이 정확히 무엇인지 시험하지 않았으므로 소금 한 알로 "더 큰"것을 취하십시오.
두 번째 DIV 또한
<div style="background: none repeat scroll 0% 0% red; margin: 0pt;">
<div style="background: none repeat scroll 0% 0% green; float: left;">hello</div>
<div style="background: none repeat scroll 0% 0% gold; margin-top: 50px; float: left;">hello</div>
here 결과에 대한 float:left;을 제공합니다.
안녕하세요, 솔루션을 제공하고 데모를 만드는 데 시간을내어 주셔서 감사합니다.하지만 Webarto에 말씀 드렸듯이 해결책을 찾고있는 것이 아니라이 동작에 대한 설명을 듣고 싶습니다. 나는 처음부터 미안하다고 말해야했다. 여전히 +1 데모 : – Daniel
아마도 컨테이너 div (빨간색)에 높이, 채우기 또는 여백이 없기 때문에 이런 현상이 발생합니다. 따라서 시작할 고정 위치가 없습니다. 빨간색 div에 위의 내용 중 하나를 설정하면 두 번째 div가 본문 대신 본문의 상단에서 여백을 시작합니다 (지금처럼) – Sotiris
고마움 라이언, 당신은 방금 내 정신을 되찾았습니다 :-) – Daniel
항상 도와 줘서 기쁩니다! –