자식 요소가 부모에 비해 여백을 사용하지 않는 이유

Question

요소 안에 <p> 자식 요소에 여백을 제공하지만 div 요소 자체를 이동합니다. 나는 단락을 임의의 값으로 이동하고 싶다. 우리는 부모 요소에 패딩을 제공 할 수 있지만 그 요소는 무엇입니까?

여기 예제 코드를 사용하십시오 ... .square p 여백 속성을 변경해보십시오.

*{ 
 
    margin: 20px auto; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
} .square p { 
 
    margin: 50px auto; 
 
}

<div class="square"><p>Hi</p></div>

그것은 부모 요소를 기준으로해야하지

?

Answer 1

문제는 여기 부모 - 자식 margin collapsing입니다. 그것을 해결하는 한 가지 방법은 overflow: hidden

* { 
 
    margin: 20px auto; 
 
    box-sizing: border-box; 
 
} 
 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
    overflow: hidden; 
 
} 
 
.square p { 
 
    margin: 50px auto; 
 
}

<div class="square"> 
 
    <p>Hi</p> 
 
</div>

Answer 2

p가 block 요소로 사용하고, 부모 square가 너무으로이 동작이 예상됩니다.

p 태그에 대해 inline-block 표시를 시도하고 부모와 관련된 여백을 조정할 수 있습니다. p을 block으로 유지하려면 부모에게 overflow: hidden을 제공해야합니다. inline-block를 사용

예 :

*{ 
 
    margin: 20px auto; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
} .square p { 
 
    margin: 50px auto; 
 
    display: inline-block; 
 
}

<div class="square"><p>Hi</p></div>

Answer 3

당신은 아이 p에 display:inline-block; 속성을 제공해야합니다.

*{ 
 
    margin: 20px auto; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
} 
 
.square p { 
 
    margin: 50px auto; 
 
    display: inline-block; 
 
}

<div class="square"><p>Hi</p></div>