Css margin-top 대 margin-bottom

Question

블록 요소의 순서가 있고 그 사이에 마진을 배치하려는 경우.

마진 - 상단 또는 마진 - 하단 또는 둘 모두를 원하십니까? 왜?

Answer 1

항상 margin-bottom을 사용합니다. 즉, 첫 번째 요소 앞에 불필요한 공백이 없음을 의미합니다.

Answer 2

상황에 따라 다름. 일반적으로 margin-top은 :first-child을 사용하여 제거 할 수 있기 때문에 더 좋습니다. 좋아요 :

div.block { 
    margin-top: 10px; 
} 

div.block:first-child { 
    margin-top: 0; 
} 

이렇게하면 마진은 블록 사이에만 적용됩니다.

더 많은 최신 브라우저에서만 작동합니다.

Answer 3

@이 매트 - 귀하의 접근 방식에 동의하지 않습니다. 나는 의미 론적 방식으로 요소들에 공간을 할당하고, 문맥 선택 자들을 사용하여 그 요소들의 집합에 대한 행동을 정의 할 것이다. 대신 그 내용의 행동 후

.content p { /* obviously choose a more elegant name */ 
    margin-bottom: 10px; 
} 

명명 클래스는 미끄러운 경사의 종류, 그리고 HTML의 의미 특성을 muddies. 예를 들어, 페이지의 한 영역에 .top10 클래스의 모든 요소가 갑자기 20 픽셀을 필요로한다면 어떻게 될까요? 단일 규칙을 변경하는 대신 새 클래스 이름을 작성하고 영향을 주려는 모든 요소에 대해 변경해야합니다.

원래 질문에 대답하려면 요소를 어떻게 쌓을 지에 달려 있습니다. 상단 또는 하단에 여분의 공간을 원하십니까?

Answer 4

예 일반적으로 나는 마진 - 바닥도 사용하고 마지막 클래스를 마지막 클래스에 할당합니다. 이것에 대해 다른 스타일을 원한다고 가정하십시오.

.discussion .detailed.topics { margin: 20px 0 }  
.discussion .detailed.topics .topic { margin-bottom: 30px } 
.discussion .detailed.topics .topic.last { margin-bottom: 0 } 

이 강력한 방법입니다 때 margin-top과 결합 + 선택 사용하는 동적 구동 내용을

HTML (면도기보기 엔진)

<div class="detailed topics"> 
    @if (Model.ActiveTopics != null && Model.ActiveTopics.Count > 0) 
    { 
     for (int i = 0; i < Model.ActiveTopics.Count(); i++) 
     { 
      var topic = Model.ActiveTopics[i]; 
      <div class="topic@(i == Model.ActiveTopics.Count - 1 ? " last" : "")"> 
       ...         
      </div> 
     } 
    } 
</div> 

Answer 5

또 다른 옵션은 사용 :

을

.article + .article { 
    margin-top: 10px; 
} 

이렇게하면 후자의 요소가 선택됩니다. h는 규칙이 첫 번째 요소에 전혀 적용되지 않음을 의미합니다. 추가 클래스, 의사 클래스 또는 요소 위 또는 아래 공간이 없습니다.

Answer 6

나는 항상 으로 생각하는 요소에 여백을 넣습니다.. 즉, DOM에서 제거 될 가능성이 큰 요소입니다. 예 : 난 그냥 제목을 언급하기를 원한다면, 제거 할 설명은 제목없이 많은 이해가되지 않기 때문에이 경우

<div class="title">My Awesome Book</div> 
<p>Description of My Awesome Book</p> 

, 나는, <p>에 margin-top를 넣어,하지만 설명 몇 가지 가능성이있다.

또 다른 예 : 여기

<img src="icon.png"> 
<div>My Awesome Book</div> 

, 내가 반대 할 것입니다. 아이콘에 margin-bottom을 추가합니다. 아이콘을 단지 장식이라고 생각하고, 다시 말하면 제거 할 가능성이 더 큽니다.

이것은 제 철학입니다. 스타일 요소는 잠재적 인 DOM 변경을 통해 CSS 변경을 방지하는 방법입니다.