CSS의 음수 여백은 어떻게 작동하며 왜 (margin-top : -5! = margin-bottom : 5)입니까?
수직 위치 지정 요소의 일반적인 트릭은 다음 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>여백은 패딩이 요소 내부의 간격 인 것처럼 요소 외부의 간격입니다.
Setting the bottom margin indicates what distance you want below the current block. Setting a negative top margin indicates that you want negative spacing above your block. Negative spacing may in itself be a confusing concept, but just the way positive top margin pushes content down, a negative top margin pulls content up.
A margin-top of -8px means it will be 8px higher than if it had 0 margin.
A margin-bottom of 8px means that the thing below it will be 8px further down that if it had 0 margin.
good points already made here, but while there is lots of information about how rendering of margins is accomplished by the browser, the why isn't quite answered yet:
"Why is margin-top:-8px not the same as margin-bottom:8px?"
what we also could ask is:
Why doesn't a positive bottom margin 'bump up' preceding elements, whereas a positive top-margin 'bumps down' following elements?
so what we see is that there is a difference in the rendering of margins depending on the side they are applied to - top (and left) margins are different from bottom (and right) ones.
things are becoming clearer when having a (simplified) look at how styles are applied by the browser: elements are rendered top-down in the viewport, starting in the top left corner (let's stick with the vertical rendering for now, keeping in mind that the horizontal one is treated the same).
consider the following html:
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
analogous to their position in code, these three boxes appear stacked 'top-down' in the browser (keeping things simple, we won't consider here the order property of the css3 'flex-box' module). so, whenever styles are applied to box 3, preceding element's positions (for box 1 and 2) have already been determined, and shouldn't be altered any more for the sake of rendering speed.
now, imagine a top margin of -10px for box 3. instead of shifting up all preceding elements to gather some space, the browser will just push box 3 up, so it's rendered on top of (or underneath, depending on the z-index) any preceding elements. even if performance wasn't an issue, moving all elements up could mean shifting them out of the viewport, thus the current scrolling position would have to be altered to have everything visible again.
same applies to a bottom margin for box 3, both negative and positive: instead of influencing already evaluated elements, only a new 'starting point' for upcoming elements is determined. thus setting a positive bottom margin will push the following elements down; a negative one will push them up.
Because you have used absolute positioning, and specified a top percentage, only margin-top will affect the location of your .item object. If instead you positioned it using bottom: 50%, then you'd need margin-bottom -8px to centre it, and margin-top would have no effect.
Margin affects the boundaries of an element in terms of positioning it, either absolutely as in your case, or relative to neighbouring elements. Imagine that margin is the foundations of your element on which it sits. They are typically the same size as it, but can be made larger or smaller on any or all of the four edges.
Your CSS tells the browser to position the top of your element the margin at a point 50% of the way down the page. However, as all elements are not a single pixel, the browser needs to know which part of it to line up 50% of the way down the page. For lining up the top of the element, it uses the top margin. By default this is in line with the top of the element, but you can alter it with CSS.
In your case, top 50% would result in the top of the element starting in the middle of the page. By applying a negative top margin, the browser uses the point 8px into the element from the top (ie the line across the middle of it) as the place to position at 50%.
If you apply a positive margin to the bottom, this extends the line the browser uses to position the bottom out away from the element itself, giving a gap between it and any adjacent element below, or affecting where it is placed absolutely if positioning based on the bottom.
I wonder if this question has been answered well: how css margins work and why is it that margin-top:-5; is not the same as margin-bottom:5;?
Margin is distance from the surroundings of the element. margin-top says "... distance from surroundings as we measure from top 'side' of the element's 'box' and margin-bottom being the distance from the bottom 'side' of the 'box'". Then margin-top:5; is concerned with the top 'side' perimeter,-5 in that case; anything approaching from top 'side' can overlap top 'side' of element by 5, and margin-bottom:5; means distance between element bottom 'side' and surrounding is 5.
Basically that but affected by float'ed elements and the like: http://www.w3.org/TR/CSS2/box.html#margin-properties.
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
I stand to be corrected.
'program story' 카테고리의 다른 글
| x 분마다 메서드 호출 (0) | 2020.08.23 |
|---|---|
| iPad의 설정 앱에서와 같은 iOS 7 TableView (0) | 2020.08.23 |
| Visual Studio에서 Eclipse의 ALT + UP / DOWN (선 이동)에 해당하는 것은 무엇입니까? (0) | 2020.08.23 |
| URL 시작 부분의 문자열 제거 (0) | 2020.08.23 |
| Morgan Logger를 사용하는 방법? (0) | 2020.08.23 |