인라인 블록 divs 여백

주는 훌륭한 divs를 정렬하는 방법에 대한 조언을 받았지만 이제는 div가 화면 크기에 스택하는 문제가 있지만 마진은 필요하지만 문제는 없습니다. 내가 얼마나 많은 마진을 줄까?인라인 블록 divs 여백

HTML :

<div class="categorylist"> 
     <div class="categorypost">1</div> 
     <div class="categorypost">2</div> 
     <div class="categorypost">3</div> 
     <div class="categorypost">4</div> 
     <div class="categorypost">5</div> 
     <div class="categorypost">6</div> 
    </div>

CSS : 다시 요소를 계산하고 마진을 검출하기 위해 브라우저를 강제로 이렇게 같이 .categorypost에

.categorylist{ 
    background-color: #FFF; 
    height: auto; 
    padding: 0px; 
    text-align: center; 
    margin: 0 auto; 
} 


.categorypost{ 
    height: 200px; 
    background-color:red; 
    margin-bottom: 20px; 
    width: 300px; 
    display:inline-block; 
    margin:0 auto; 
}

출처

2014-04-08 user3435159

어떤 마진을 추가하나요? 'margin : 0 auto; '는'.categorypost 클래스. –

여백 : 0 자동; 너의 한계를 덮어 쓰고있다. 이게 의도 된거야? – pconnor88

부모에게 자동 여백 0을주고 내부 div에 float를 사용합니다. 왼쪽 –

내가 예를 들어

HTML

<div class="categorylist"> 


     <div class="categorypost">1</div> 

     <div class="categorypost">2</div> 

     <div class="categorypost">3</div> 

     <div class="categorypost">4</div> 

     <div class="categorypost">5</div> 

     <div class="categorypost">6</div> 


    </div>

CSS

로 정확하게 여기에 이해한다면

* { 
    margin: 0; 
    padding: 0; 
} 
.categorylist{ 
    background-color: #ddd; 
    height: auto; 
    padding: 0px; 
    text-align: center; 
    margin: 0 auto; 
    width: 960px; 
} 


.categorypost { 
    height: 200px; 
    background-color:red; 
    width: 300px; 
    display: block; 
    margin: 0 auto 20px; 
}

DEMO

출처

2014-04-08 12:43:07 AlexPrinceton

설정 overflow: hidden.

http://codepen.io/AndreiPham/pen/vhkas/

출처

2014-04-08 12:37:52

요소 **는 플로팅되지 않습니다 ** –

그래, 그렇지 않습니다. 내 잘못이야. 솔직히,'overflow : hidden'은 div의 높이에 영향을 미치기 때문에 문제를 해결할 수있었습니다. 어쨌든, @ user3435159, 당신은 실제로 앤드류 포프 (Andrew Pope)의 답변을 따라야합니다. 이것은 '문제 제거제'가 아니라 원조의 일종입니다. –

당신의 마지막 줄 제거 :

margin:0 auto;

당신은 무시하는 당신의 그것과 margin-bottom : 당신이 margin: 0 auto;로 두 번 여백 하단을 설정하는 .categorypost에

.categorypost{ 
    margin-bottom: 20px; 
    margin:0 auto;  /* Culprit */ 
}

출처

2014-04-08 12:38:57 Bigood

... 어쨌든'margin : 0 auto'는 아무 것도하지 않습니다. 요소는 부모에'text-align'을 통해 중심에 배치됩니다. –

여기를 참조하십시오 : http://jsfiddle.net/webtiki/Q4h2J/2/ –

@Paulie_D 실제로. 질문 편집. – Bigood

및 첫 번째 재정의 :

이에

변경 :

.categorypost { 
    margin-bottom: 20px; 
    margin-left: auto; 
    margin-right: auto; 
}

속기 :

.categorypost { 
    margin: 0 auto 20px; 
}

출처

2014-04-08 12:39:26 Andy

것은 나는 질문의 모든 것을 이해하지 않은,하지만 난 당신이하지 축소 할 수 있도록 사업부를 원하는 것 같아요. 레이아웃이 당신의 .categorylist 블록에 margin: 0 auto;로를 중심으로되어 있기 때문에

첫째, 당신은, 당신의 .categorypost 블록에 margin: 0 auto 필요하지 않습니다. http://www.w3schools.com/css/css_margin.asp

을 지금 당신은 당신의 .categorypost 블록 사이의 수직 공백을 추가하려는 경우처럼 당신이 margin 함께 할 수 있습니다,하지만 두 번째 margin: 0 auto은 margin-bottom: 20px를 오버라이드 :

마진 속성이 작동하는 방법을 알고이 사이트를 참조하십시오 .

예 : margin-bottom: 20px; 또는 margin-top: 10px; margin-bottom: 10px; 예를 들어 위아래 여백을 추가하여 더 예쁘게하려면.

여기를 참조하십시오. http://jsfiddle.net/9etcQ/

출처

2014-04-08 12:47:35 Sebj

인라인 블록 divs 여백

답변

관련 문제