이 사각형의 위쪽과 아래쪽에 여백을 남기려면 어떻게해야합니까?

외부 div 요소를 만들었고 그 안에 간단한 사각형을 만들려고합니다. 이제, 첫 번째면의 수평 위치가 나타납니다. 그러나 세로 배치의 경우 lenght1 div 위쪽과 아래쪽 div 사이에 10px의 여백을두고 싶습니다. 다음은 제 코드입니다.이 사각형의 위쪽과 아래쪽에 여백을 남기려면 어떻게해야합니까?

<!DOCTYPE html> 
<html> 
<head> 
<style> 
*{ 
    margin:0px; 
    padding:0px; 

} 
body{ 
    margin:10px 0px; 
} 
div.outer{ 
    height:400px; 
    width: 500px; 
    margin:100px auto; 
    margin-top: 130px; 
    background-color:red; 
} 
div.length1{ 
    height:380px; 
    width:30px; 
    margin:10px 470px 10px 0px; 
    background-color:blue; 
} 
</style> 
</head> 
<body> 
    <div class="outer"> 
     <div class="length1"></div> 
     <div class="breadth1"></div> 
     <div class="length2"></div> 
     <div class="breadth2"></div> 
    </div> 
</body> 
</html>

출처

2016-06-20 Swastik Mohapatra

가능한 중복 collapsing?] (http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing) – LGSon

내부 div의 붕괴 여백이 예상대로 푸시되지 않습니다.

그것은 아주 잘 여기에 설명되어 있습니다 :

한 가지 방법은 부모 overflow: auto

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
body{ 
 
    margin:10px 0; 
 
} 
 
div.outer{ 
 
    height:180px; 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    background-color:red; 
 
    overflow: auto; 
 
} 
 
div.length1{ 
 
    height: calc(100% - 20px); 
 
    width:30px; 
 
    margin: 10px 0 10px 10px; 
 
    background-color:blue; 
 
}

<div class="outer"> 
 
    <div class="length1"></div> 
 
    <div class="breadth1"></div> 
 
    <div class="length2"></div> 
 
    <div class="breadth2"></div> 
 
</div>

에게 제공하는 것입니다 313,210

또 다른 방법은 어린이

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
body{ 
 
    margin:10px 0; 
 
} 
 
div.outer{ 
 
    height:180px; 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    background-color:red; 
 
    padding: 10px; 
 
} 
 
div.length1{ 
 
    height: 100%; 
 
    width:30px; 
 
    background-color:blue; 
 
}

<div class="outer"> 
 
    <div class="length1"></div> 
 
    <div class="breadth1"></div> 
 
    <div class="length2"></div> 
 
    <div class="breadth2"></div> 
 
</div>

출처

2016-06-20 17:49:39 LGSon

정확히 내가 무엇을 찾고 있었는지. @LGSon 그러나 패딩없이 동일한 결과를 얻을 수 있습니까? 내부 div에 여백을 추가 할 수 없다는 뜻입니까? –

@SwastikMohapatra 업데이트 내 대답 – LGSon

@LGSon 많이 고마워! :) –

에 margin 대신 부모에 padding를 사용하는

position:absolute;

01 사용

입니다

길이 1 스타일입니다.

같은 :

이

.length1{ 
    height:380px; 
    width:30px; 
    margin:10px 470px 10px 0px; 
    background-color:blue; 
    position:absolute; 
}

또한 div.length1 :

대신 .length1 사용할 수 있습니다 내가 제거 할 것 : [해제하는 방법 margin-의

*{ 
    margin:0px; 
    padding:0px; 

} 
body{ 
    margin:10px 0px; 
}

출처

2016-06-20 18:33:08 Frazstew

고맙습니다. :) –

걱정하지 마세요, 언제든지 :) – Frazstew

이 사각형의 위쪽과 아래쪽에 여백을 남기려면 어떻게해야합니까?

답변

관련 문제