수직 위치 지정 요소의 일반적인 트릭은 다음 CSS를 사용하는 것입니다.
.item {
position:absolute;
top:50%;
margin-top:-8px; /* half of height */
height: 16px;
}Chrome에서와 같이 메트릭보기에서 볼 때 다음과 같이 표시됩니다.
그러나 요소 위로 마우스를 가져 가면 시각적 여백이 표시되지 않습니다. 즉, 여백이 테두리 '외부'에 있고 시각화 할 수 있습니다. 그러나 마이너스 마진은 나타나지 않습니다. 그들은 어떻게 보이고 다른 점은 무엇입니까?
왜 margin-top:-8px 같지 않습니다 margin-bottom:8px 않습니까?
그래서 마이너스 마진은 어떻게 작동하며 그 뒤에있는 직관은 무엇입니까? 항목을 어떻게 '부프'(의 경우 margin-top < 0)합니까?
답변:
음의 여백은 CSS에서 유효하며 (준수) 동작을 이해하는 것은 주로 상자 모델 과 여백 축소를 기반으로합니다 . 특정 시나리오는 더 복잡하지만 사양을 검토 한 후에는 많은 일반적인 실수를 피할 수 있습니다.
예를 들어 샘플 코드의 렌더링은 절대적으로 배치 된 대체되지 않은 요소의 높이와 여백 계산에 설명 된대로 CSS 사양에 따라 안내됩니다 .
그래픽 표현을 만들려면 아마도 다음과 같이 할 것입니다 (축척이 아님).
상단 의 여백 상자가 사라졌지 8px만 내용 및 패딩 상자 에는 영향을주지 않습니다 . 요소가 절대 위치에 있기 때문에 요소를 8px 위로 이동해도 레이아웃이 더 이상 방해받지 않습니다. 항상 그렇지는 않은 정적 유입 콘텐츠로.
보너스:
아직 사양을 읽는 것은 설득력 필요 (반대로 갈 방법 이 같은 기사 )? 당신이 설정해야 할 이유 그래서, 당신이 수직 요소를 중심하려는 참조 하지 ?margin-top:-8px;margin-top:-50%;
글쎄, CSS의 수직 센터링 은 생각보다 어렵습니다 . 설정하는 경우에도 상단 또는 하단 %의 마진 값은 다음과 같이 계산된다 받는 항상 상대 백분율 폭 포함하는 블록 . 이것은 일반적인 함정이며 w3 docos 외부에서는 거의 설명되지 않습니다.
나는 그것을 시각적으로 설명하려고 노력할 것입니다.
/**
* explaining margins
*/
body {
padding: 3em 15%
}
.parent {
width: 50%;
width: 400px;
height: 400px;
position: relative;
background: lemonchiffon;
}
.parent:before,
.parent:after {
position: absolute;
content: "";
}
.parent:before {
top: 0;
bottom: 0;
left: 50%;
border-left: dashed 1px #ccc;
}
.parent:after {
left: 0;
right: 0;
top: 50%;
border-top: dashed 1px #ccc;
}
.child {
width: 200px;
height: 200px;
background: rgba(200, 198, 133, .5);
}
ul {
padding: 5% 20px;
}
.set1 .child {
margin: 0;
position: relative;
}
.set2 .child {
margin-left: 75px;
position: relative;
}
.set3 .child {
margin-left: -75px;
position: relative;
}
/* position absolute */
.set4 .child {
top: 50%;
left: 50%;
margin: 0;
position: absolute;
}
.set5 .child {
top: 50%;
left: 50%;
margin-left: 75px;
position: absolute;
}
.set6 .child {
top: 50%; /* level from which margin-top starts
- downwards, in the case of a positive margin
- upwards, in the case of a negative margin
*/
left: 50%; /* level from which margin-left starts
- towards right, in the case of a positive margin
- towards left, in the case of a negative margin
*/
margin: -75px;
position: absolute;
}<!-- content to be placed inside <body>…</body> -->
<h2><code>position: relative;</code></h2>
<h3>Set 1</h3>
<div class="parent set 1">
<div class="child">
<pre>
.set1 .child {
margin: 0;
position: relative;
}
</pre>
</div>
</div>
<h3>Set 2</h3>
<div class="parent set2">
<div class="child">
<pre>
.set2 .child {
margin-left: 75px;
position: relative;
}
</pre>
</div>
</div>
<h3>Set 3</h3>
<div class="parent set3">
<div class="child">
<pre>
.set3 .child {
margin-left: -75px;
position: relative;
}
</pre>
</div>
</div>
<h2><code>position: absolute;</code></h2>
<h3>Set 4</h3>
<div class="parent set4">
<div class="child">
<pre>
.set4 .child {
top: 50%;
left: 50%;
margin: 0;
position: absolute;
}
</pre>
</div>
</div>
<h3>Set 5</h3>
<div class="parent set5">
<div class="child">
<pre>
.set5 .child {
top: 50%;
left: 50%;
margin-left: 75px;
position: absolute;
}
</pre>
</div>
</div>
<h3>Set 6</h3>
<div class="parent set6">
<div class="child">
<pre>
.set6 .child {
top: 50%;
left: 50%;
margin: -75px;
position: absolute;
}
</pre>
</div>
</div>-8px의 margin-top은 여백이 0 인 경우보다 8px 더 높다는 것을 의미합니다.
8px의 margin-bottom은 여백이 0 인 경우 아래의 것이 8px 더 아래에 있음을 의미합니다.
margin-bottom: -8px;? 왜 margin-bottom:-8px같지 margin-top:-8px않습니까?
여기에 이미 좋은 점이 있지만 브라우저에서 여백 렌더링을 수행 하는 방법 에 대한 많은 정보 가 있지만 아직 그 이유 에 대한 답이 아직 없습니다.
"왜 margin-top : -8px가 margin-bottom : 8px와 같지 않습니까?"
우리가 또한 물어볼 수있는 것은 :
양수 하단 여백은 요소 이전에 '범프 업'하지 않는 반면 양수 상단 여백은 요소 다음에 '범프 다운'하지 않는 이유는 무엇입니까?
따라서 우리가 보는 것은 적용되는면에 따라 여백 렌더링에 차이 가 있다는 것입니다. 위쪽 (왼쪽) 여백은 아래쪽 (오른쪽) 여백과 다릅니다.
브라우저에서 스타일이 적용되는 방식을 (간소화 된) 살펴보면 상황이 더 명확 해집니다. 요소는 뷰포트에서 하향식으로 렌더링되며 왼쪽 상단 모서리부터 시작됩니다 (지금은 수직 렌더링을 사용하여 수평 하나는 동일하게 취급됩니다).
다음 html을 고려하십시오.
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>코드에서의 위치와 유사하게이 세 상자는 브라우저에서 '하향식'으로 쌓여 표시됩니다 ( 간단하게 유지하면서 여기서는 ordercss3 'flex-box'모듈 의 속성을 고려하지 않겠습니다. ). 따라서 스타일이 상자 3에 적용될 때마다 이전 요소의 위치 (상자 1 및 2에 대한)가 이미 결정되었으며 렌더링 속도를 위해 더 이상 변경하지 않아야합니다.
이제 상자 3에 대해 위쪽 여백이 -10px라고 상상해보십시오. 이전 요소를 모두 위로 이동하여 공간을 확보하는 대신 브라우저는 상자 3을 위로 밀어 올릴 것이므로 Z- 색인에 따라 위쪽 (또는 아래쪽)에 렌더링됩니다. ) 모든 선행 요소. 성능이 문제가되지 않더라도 모든 요소를 위로 이동하면 뷰포트 밖으로 이동할 수 있으므로 모든 요소를 다시 표시하려면 현재 스크롤 위치를 변경해야합니다.
네거티브와 포지티브 모두 상자 3의 아래쪽 여백에도 동일하게 적용됩니다. 이미 평가 된 요소에 영향을주는 대신 다음 요소에 대한 새로운 '시작점'만 결정됩니다. 따라서 양의 하단 여백을 설정하면 다음 요소가 아래로 밀 립니다. 부정적인 것은 그들을 밀어 올릴 것입니다.
절대 위치 지정을 사용하고 상위 백분율을 지정했기 때문에 margin-top 만 .item 개체의 위치에 영향을줍니다. 대신 bottom : 50 %를 사용하여 배치했다면 중앙에 margin-bottom -8px가 필요하며 margin-top은 효과가 없습니다.
여백은 요소의 위치를 지정하는 측면에서 요소의 경계에 영향을줍니다. 귀하의 경우와 같이 절대적으로 또는 인접 요소를 기준으로합니다. 여백이 그것이 놓여있는 요소의 기초라고 상상해보십시오. 일반적으로 크기는 동일하지만 네 모서리 중 일부 또는 모두에서 더 크거나 작게 만들 수 있습니다.
CSS는 페이지 아래쪽의 50 % 지점에 여백을 배치하도록 브라우저에 지시합니다. 그러나 모든 요소가 단일 픽셀이 아니기 때문에 브라우저는 페이지 아래쪽의 50 %를 정렬 할 부분을 알아야합니다. 요소의 상단을 정렬하기 위해 상단 여백을 사용합니다. 기본적으로 이것은 요소의 상단과 일치하지만 CSS로 변경할 수 있습니다.
귀하의 경우 상위 50 %는 페이지 중간에서 시작하는 요소의 상단이됩니다. 상단 여백을 음수로 적용하면 브라우저는 상단에서 요소의 8px 지점 (즉, 중간을 가로 지르는 선)을 50 %에 배치 할 위치로 사용합니다.
아래쪽에 양의 여백을 적용하면 브라우저가 아래쪽을 요소 자체에서 멀리 배치하는 데 사용하는 선이 확장되어 아래쪽에있는 인접한 요소 사이에 간격을 제공하거나 다음을 기준으로 배치하는 경우 절대 위치에 영향을줍니다. 바닥.
이 질문에 대한 답이 잘되었는지 궁금합니다 : CSS 마진이 어떻게 작동하는지 그리고 왜 마진이 가장 높은지 : -5; margin-bottom : 5 ;?와 같지 않습니다.
여백은 요소 주변으로부터의 거리입니다. margin-top은 "... 요소의 '상자'의 상단 '측면'에서 측정 할 때 주변으로부터의 거리이고 margin-bottom은 '상자'의 하단 '측면'으로부터의 거리입니다"라고 말합니다. 그런 다음 margin-top : 5; 이 경우 상단 '측면'경계와 관련이 있습니다. 상단 '측면'에서 접근하는 모든 항목은 요소의 상단 '측면'과 5만큼 겹칠 수 있으며 margin-bottom : 5; 요소 하단 '측면'과 주변 사이의 거리가 5임을 의미합니다.
기본적으로는 http://www.w3.org/TR/CSS2/box.html#margin-properties 와 같은 float 요소의 영향을받습니다 .
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
나는 바로 잡아야한다.
onset와 를 삽입하여 개선 할 수 있습니다offset. 많은 사람들이 ( positive ) 를 의미 할 때 항상offset( negative ) 라는 단어를 사용하는 것은 사실 입니다. 답변을 업데이트하면이 메시지가 자동으로 삭제됩니다. 건배!onset