2012-06-14 10 views
1

margin-bottom을 사용하여 div 요소 위치 지정을 시도했습니다. 어떤 이유로 여백 - 바닥이 요소의 위치에 영향을 미치지 않는 것 같습니다. 모든 대답은 position:absolute과 관련이 있지만 답변을 찾으려고 시도했지만 여전히 작동하지 않았습니다.요소에 여백 바닥 적용

그러나 나는 음수 여백을 사용하여 위치를 조정했으나 여전히 작동하지 않게하는 원인이 무엇인지 궁금해합니다.

HTML/CSS를 보여주는 fiddle이 있습니다.
(내가 말하고있는 것은 이미지입니다. 여백 - 바닥은 100px로 설정됩니다.)

+0

margin-bottom이 요소의 위치에 영향을 미치지 않는 이유를 설명하는 내용으로 내 대답을 업데이트했습니다. –

답변

1

클래스 "productImage"를 사용하여 위치 절대 속성을 DIV에 넣으십시오. 예를 들면 다음과 같습니다.

.productImage { 
    display: block; 
    float: left; 
    position: absolute; 
    left: 450px; 
    top: 60px; 
} 

이 이미지를 사용하여 성공적으로 이미지를 조작했습니다. 나는 그것이 당신을 도울 수 있기를 바랍니다. 다음의

0

display: block을 추가하는 것을 고려하십시오.

+0

시도 - 작동하지 않습니다. – Asaf

+0

죄송합니다. 다른 것은 옳다. 부정적인'margin-top'이 더 좋다. –

0

아래쪽 여백은 요소가 어떻게 든 아래쪽으로 배치 된 경우에만 작동합니다. 바로 지금, 그것은 H1에 의해 정해지고있는 그 정상에 의거하여 위치하게된다. H1을 블록으로 사용하지 않으려면 display:inline-block으로 설정하십시오. 또한 너비를 단락 너비로 설정할 수 있습니다.

언급했듯이,이 때문에 음수 여백 가기 작동합니다.

0

하나를 사용

  • 음 (또는 단순히 작은) margin-top
  • position: relative과 부정적인 top

또한 설명 :

마진 바닥, 정상에 문서 흐름은 정상적인 블록 수준의 e lements는 자녀의 키와 함께 키가 커집니다. 따라서 요소의 위치는 앞에있는 요소와 자체 여백으로 결정됩니다.

관련 문제