auto는 마진에서 무엇을 합니까: 0 auto?

auto는 마진에서 무엇을 합니까: 0 auto?

무엇인가.auto인으로 하다margin: 0 auto;?

무슨 일인지 이해할 수 없는 것 같습니다.auto가끔은 물체를 중심에 놓는 효과가 있다는 걸 알아요

지정한 경우width사용자가 적용한 개체에 대해margin: 0 autoto, 개체는 상위 컨테이너 내의 중앙에 위치합니다.

지정하기auto두 번째 매개 변수는 기본적으로 브라우저가 왼쪽 및 오른쪽 여백 자체를 자동으로 결정하도록 지시하며, 이를 동일하게 설정하여 수행합니다.왼쪽 여백과 오른쪽 여백이 동일한 크기로 설정됨을 보장합니다.첫 번째 모수 0은 상단 여백과 하단 여백이 모두 0으로 설정됨을 나타냅니다.

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

그러므로, 예를 들자면, 만약 부모가 100px이고 자식이 50px이면,auto부동산은 50 px의 여유 공간이 있다는 것을 결정할 것입니다.margin-left그리고.margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

다음을 얻을 수 있습니다.

margin-left: 25;
margin-right: 25;

이 jsFiddle을 보세요.상위 너비를 지정할 필요는 없으며 하위 개체의 너비만 지정할 필요가 있습니다.

auto: 브라우저가 마진을 설정합니다.이 결과는 브라우저에 따라 달라집니다.

여백:0 자동 지정

* top and bottom margins are 0
* right and left margins are auto

블록 레벨, 정상 흐름에서 교체되지 않은 요소에 대한 너비 및 여백 계산에 대한 CSS 사양에서 다음을 참조하십시오.

'margin-left'와 'margin-right'가 모두 'auto'일 경우 사용된 값은 동일합니다.이것은 요소를 포함하는 블록의 가장자리를 기준으로 수평으로 중심을 맞춥니다.

margin:0 auto;

0위 아래를 위한 것입니다.auto좌우용으로좌/우 여백은 요소의 너비와 용기의 너비에 따라 자동 여백을 취함을 의미합니다.

일반적으로 어떤 요소라도 중심 위치에 놓으려면margin:auto완벽하게 작동합니다.그러나 블록 요소에서만 작동합니다.

두 가치관이 어떻게 작동하는지에 대한 설명과 함께 더 명확해집니다.

마진 속성은 다음의 약자입니다.

margin-top
margin-right
margin-bottom
margin-left

그렇다면 왜 두 개의 가치만 가지고 있는 것일까요?

다음과 같은 네 가지 값으로 마진을 표현할 수 있습니다.

margin: 10px, 20px, 15px, 5px;

위 px, 오른쪽 px, 아래 px, 왼쪽 px.

마찬가지로 다음과 같은 두 가지 값으로 표현할 수도 있습니다.

margin: 20px 10px;

이렇게 하면 상하 20px, 좌우 10px 여유가 생깁니다.

설정한 경우:

margin: 20px auto;

그러면 상하 마진은 20px, 좌우 마진은 오토를 의미합니다.그리고 auto는 컨테이너를 기준으로 왼쪽/오른쪽 여백이 자동으로 설정됨을 의미합니다.요소가 블럭 유형 요소인 경우 상자이며 뷰의 전체 너비를 차지하는 경우 자동으로 왼쪽 여백과 오른쪽 여백을 동일하게 설정하여 요소의 중심을 맞춥니다.

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0은 상하좌우를 뜻하며 자동은 좌우를 뜻합니다.브라우저가 여백을 설정합니다.

auto인에

margin: 0 auto;

브라우저에 설정을 지시합니다.margin-left그리고.margin-right브라우저가 두 여백에 동일한 값을 부여하여 자동으로 달성하는 요소의 속성입니다.

몇 가지 중요한 사항은 다음과 같습니다.

1. 너비가 지정된 블록 레벨 요소에만 사용할 수 있습니다.

   a. 너비를 지정하지 않으면 블록 레벨 요소가 전체를 차지하므로 좌우 여백이 0으로 설정됩니다.width용기의.

   b의 .inline아니면inline-blockelements, 전후에 다른 인라인 element가 존재하기 때문에 여백을 설정할 수 있는 수평 공간이 없습니다.

2. auto수평 센터링에만 유용하므로 를 사용합니다.margin: auto 0;요소를 수직으로 가운데에 두지 않습니다. source

.card {
  width: 400px;
  height: 100px;
  background-color: yellow;
}

.box {
  width: 30px;
  height: 20px;
  background-color: red;
  margin: 0 auto;
  /* margin: auto 0; */
  /* display: inline-block; */
}

<div class="card">
  <div class="box">Box</div>
</div>

"중심" 태그를 대체하기가 매우 어렵습니다.깨진 테이블과 블록과 텍스트에 대한 비작업 중심화가 필요할 때 유용합니다.

언급URL : https://stackoverflow.com/questions/3170772/what-does-auto-do-in-margin-0-auto