표시 만들기 : 인라인 블록을 사용하면 단락이 왼쪽으로 이동합니다.

div 표시 속성 inline-block은 표시 속성이없는 margin:0 auto의 가운데에있는 단락을 왼쪽으로 이동하는 이유는 무엇입니까? content표시 만들기 : 인라인 블록을 사용하면 단락이 왼쪽으로 이동합니다.

.content 
{ 
    padding: 20px; 
    margin: 0 auto; 
    display: inline-block; 
    width: 900px; 
    height: 2000px; 
}

는 내부의 단락이있는 DIV의 클래스 ID입니다. display: inline-block을 추가하면 단락이 왼쪽으로 이동합니다. 왜 그래야만하지?

https://jsfiddle.net/3h1wwgy6/1/

출처

2016-06-08 InQusitive

이 질문은 http://stackoverflow.com/questions/19076919/marginauto-with-inline-block과 같다고 생각합니다. – neallred

@neallred : 예, 중복으로 만듭니다. – InQusitive

이것은 중복되지 않습니다. 이것은 명시 적으로 묻습니다. 유효한 질문은 '왜?'입니다. 그 질문에 대답하려고 노력했습니다 : http://stackoverflow.com/a/37710665/2397550 – JoostS

display:block (블록 레벨 요소) 전체 페이지 폭을 점유/동작 특성을 갖는 한 DIV. 따라서 자동에 margin-left와 margin-right를 지정하면 자동으로 이 사용 가능한 공간 인을 양쪽 모두 동일하게 차지합니다. 따라서 요소는 부모 요소의 너비에 따라 중앙에 배치됩니다.

DIV의 디스플레이 속성을 display:inline-block으로 변경할 때. 두 세계의 장점을 최대한 활용합니다 (블록 & 인라인). 즉, 블록 요소와 같은 패딩을 사용하고 인라인 요소 (예 : span 또는 anchor)와 같은 일반적인 HTML 레이아웃 흐름을 따라갈 수있는 최종 여백을 사용할 수 있습니다. 당신이 자동인라인 블록로 말할 때

그래서, 인라인 블록에 대한 기본 자동 동작은 문서의 정상적인 흐름을 따르는 것입니다 (즉, 0 픽셀).

는 자동에 대한

공식 정의 : 상황에 따라

자동 마진

는 자동차 값의 제공은 자신의 스타일에 제공된 값 에 따라 마진을 렌더링하기 위해 브라우저에 지시 . 그러나 의미있는 너비가있는 요소에 이러한 여백이 적용되면 공백으로 렌더링 될 수 있습니다.

출처

2016-06-08 18:17:06

자동은 기본값을 의미하지 않습니다. 나는 'auto'가 무엇을 의미하는지 설명하려고 노력했다 : http://stackoverflow.com/a/37710665/2397550 – JoostS

@JoostS Thanks. 나는 내 대답에서 "자동"을 어떻게 언급했는지 정정했다. –

으로 div를 가운데로 맞추려면 부모 div에 text-align: center을 사용하십시오. @David Chelliah가 말했듯이, display: inline-block은 인라인 요소처럼 행동합니다.

출처

2016-06-08 18:21:27 LXXIII

표시 만들기 : 인라인 블록을 사용하면 단락이 왼쪽으로 이동합니다.

답변

관련 문제