왜 여백이 오버플로없이 적용되지 않습니다 : 자동

Question

레이블과 텍스트가 나란히있는보기 페이지를 만들려고합니다. 이제 오버플로 자동차를 언급하지 않고도 여백에는 문제가 발생하지 않습니다. 왜??

이것은 내 CSS & html입니다. 자동 :

.dl-horizontal { 
 
    margin-bottom: 20px; 
 
    /*overflow:auto*/ 
 
} 
 

 
.dl-horizontal dt { 
 
    clear: left; 
 
    float: left; 
 
    font-weight: bold; 
 
    line-height: 25px; 
 
    width: 160px; 
 
} 
 

 
.dl-horizontal dd { 
 
    content: " "; 
 
    display: table; 
 
    line-height: 25px; 
 
} 
 

 

 
.action-wrap{ 
 
    clear: both; 
 
    margin-top: 20px; 
 
}

<dl class="dl-horizontal"> 
 
    <dt>Name:</dt>   <dd>My Name</dd> 
 
    <dt>Description:</dt> <dd>Lorem ipsuem</dd> 
 
    <dt>Group:</dt>   <dd></dd> 
 
</dl> 
 
<div class="action-wrap ng-scope"> 
 
    <button class="button cancel" >Cancel</button> 
 
</div>

나는 개인적으로이 문제를 여러 번 얼굴을 내 빠른 수정이 오버 플로우입니다

. 그것을 사용하는 것이 괜찮은지 알고 싶거나 잘못된 것을하고 있는지 알고 싶습니다.

Answer 1

업데이트 : 더 나은 방법을 찾았습니다. 아래에서 말한 것을 잊어 버리십시오. 디스플레이 추가 : table; .dl- 수평 선택기로. 이제 빨간색 테두리 (시각적 인 용도로)가 각각 동일합니다.

dd 태그에 아무 것도없는 경우 줄을 아래로 밀어 내지 않습니다. 덧붙여서, padding-bottom : 20px는 작동하지만, 원하지 않으면 dd 필드에   (줄 바꿈하지 않는 공간)을 넣어야 할 수도 있습니다. 그것도 잘 작동하는 것 같습니다. CSS는 많은 단점을 가지고 :

.dl-horizontal { 
 
    margin-bottom: 20px; 
 
    display: table; 
 
border-bottom: 1px solid red; 
 
} 
 

 
.dl-horizontal dt { 
 
    clear: left; 
 
    float: left; 
 
    font-weight: bold; 
 
    line-height: 25px; 
 
    width: 160px; 
 
} 
 

 
.dl-horizontal dd { 
 
    content: " "; 
 
    display: table; 
 
    line-height: 25px; 
 
} 
 

 

 
.action-wrap{ 
 
    clear: both; 
 
    margin-top: 20px; 
 
}

<dl class="dl-horizontal"> 
 
    <dt>Name:</dt>   <dd>My Name</dd> 
 
    <dt>Description:</dt> <dd>Lorem ipsuem</dd> 
 
    <dt>Group:</dt>   <dd></dd> 
 
</dl> 
 
<div class="action-wrap ng-scope"> 
 
    <button class="button cancel" >Cancel</button> 
 
</div> 
 
<dl class="dl-horizontal"> 
 
    <dt>Name:</dt>   <dd>My Name</dd> 
 
    <dt>Description:</dt> <dd>Lorem ipsuem</dd> 
 
    <dt>Group:</dt>   <dd>&nbsp;</dd> 
 
</dl> 
 
<div class="action-wrap ng-scope"> 
 
    <button class="button cancel" >Cancel</button> 
 
</div>

Answer 2

이 때문에 여백이 붕괴에 기본적이다.

두 개 이상의 상자의 인접 여백 (비어 있지 않은 내용, 채우기 또는 테두리 영역 또는 여백을 구분하지 않음)이 결합되어 단일 여백을 형성합니다.

마진 붕괴를 방지하기 위해 float 속성 또는 overflow : auto를 css에 추가하여이를 방지하는 방법 중 하나입니다.

확인이 바이올린 : http://jsfiddle.net/1pw4zwhf/1/

코드 :

때문에

.dl-horizontal { 
    margin-bottom: 20px; 
    /* overflow:auto; */ 
    float:left; 
}