CSS의 여백 속성에 대한 심층적인 이해-CSS 튜토리얼-php.cn

CSS의 여백 속성에 대한 심층적 이해 예전에는 여백 속성이 아주 단순한 속성이라고 생각했는데, 최근 프로젝트를 진행하면서 몇 가지 문제에 부딪혔는데, 마진 속성에는 아직 "피트"가 있습니다. 아래에서는 마진과 그 "피트"에 대한 기본 지식을 소개하겠습니다. 이 블로그 게시물은 주로 다음 부분으로 나뉩니다. <ul class=" list-paddingleft-2"> <li>마진--기본 지식</li> <li>마진--동일 레벨 요소(비 -parent-child 적용 </li> <li>관계 사이의 여백)--상위 요소와 하위 요소 사이에 적용(강조)</li> <li> margin --여백 값 단위가 %인 여러 상황 </li> </ul> <h2>1부: 여유--기본 지식</h2> 기본 사항을 소개합니다. 마진 지식을 보면 <a href="http://www.php.cn/code/790.html" target="_blank">css 박스 모델</a>(박스 모델)에 대해 이야기하지 않을 수 없습니다. 일반적으로 CSS 박스 모델은 디자인과 레이아웃에 사용됩니다. 여백, 테두리, 패딩 및 중간 내용을 포함하는 기본적으로 상자입니다. 아래 그림은 박스 모델입니다(여기서는 IE5 및 IE6의 이상한 모드에서 사용되는 비표준 박스 모델이 아니라 W3C 사양의 표준 박스 모델에 대해서만 설명합니다): <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-0.png" alt="" style="max-width:90%" style="max-width:90%"> 우리가 소개할 여백은 가장 바깥쪽 레이어에 있습니다. 여백(여백)은 투명해야 하기 때문에 아름다운 레이아웃과 기타 효과를 얻기 위해 서로 다른 상자 사이에 일정한 간격을 두는 데 사용할 수 있습니다. 위의 박스 모델에서 우리는 margin-top, <a href="http://www.php.cn/wiki/934.html" target="_blank">margin-right</a>, <a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</a> 및 margin-left를 사용하여 이를 각각 설정할 수 있습니다. . 네 방향의 마진 값. (참고: 이 부분의 지식은 상대적으로 기초적이므로 이 부분에서는 더 이상 소개하지 않겠습니다.) <h2>Part 2: 여백--동시에 레벨 요소 간 </h2> 적용(비부모-자식 관계) 이 부분에서는 주로 가로 및 세로 여백 병합에 대해 소개합니다. <h2> (1) 가로 여백 병합 </h2> 　 두 개의 가로 상자가 만나고, 그 사이의 최종 거리는 왼쪽 상자의 오른쪽 여백이고 오른쪽 상자는 여백의 합입니다. . 예시 1: 코드는 다음과 같습니다. <table border="0"><tbody><tr class="firstRow"> <td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 </td> <td class="code"> <code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>水平方向的两个盒子</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{</code> <code class="html spaces"> </code><code class="html plain">margin:0;</code> <code class="html spaces"> </code><code class="html plain">padding:0;</code> <code class="html spaces"> </code><code class="html plain">border:0;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">body{</code> <code class="html spaces"> </code><code class="html plain">font-size: 0;</code> <code class="html spaces"> </code> <code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.left{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">display: inline-block;</code> <code class="html spaces"> </code><code class="html plain">margin-right: 50px;</code> <code class="html spaces"> </code><code class="html plain">font-size: 20px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.right{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: yellow;</code> <code class="html spaces"> </code><code class="html plain">display: inline-block;</code> <code class="html spaces"> </code><code class="html plain">margin-left: 50px;</code> <code class="html spaces"> </code><code class="html plain">font-size: 20px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="left">宽为100px,右边距为50px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="right">宽为100px,左边距为50px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr></tbody></table> 효과는 다음과 같습니다. <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-1.png" alt=""> 이때 둘 사이의 거리는 정확히 100px입니다. 보충 설명: 보시다시피 일반적인 문서 흐름에서 두 개의 p(블록 요소)를 만들기 위해 속성을 사용했습니다. 또한 본문 Set Font-size를 0으로 설정하면 인라인 블록 자체의 문제를 해결할 수 있습니다. (여기 설명이 명확하지 않은 경우 내 블로그 게시물 "CSS에서 표시 속성 이해 및 적용 ", 이 기사에서는 인라인 블록 기존 문제 )를 소개합니다. 그렇지 않으면 두 p 예제가 100px보다 커질 것입니다. 물론, float를 사용하여 두 개의 p가 같은 줄에 나타나도록 할 수도 있습니다. <h2> (2) 세로 여백 병합 </h2> 두 개의 세로 상자가 만났을 때 세로 거리는 위의 상자와 동일합니다. 아래 상자와 아래 상자의 상단 여백. 예시 2: > 1 2 <table border="0">3<tbody><tr class="firstRow">4<td class="gutter"> 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 </td> <td class="code"> <code class="html plain"><!</code><code class="html keyword">DOCTYPE</code><code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code><code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>水平方向的两个盒子</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code> <code class="html plain">*{</code> <code class="html spaces"> </code><code class="html plain">margin:0;</code> <code class="html spaces"> </code><code class="html plain">padding:0;</code> <code class="html spaces"> </code><code class="html plain">border:0;</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">margin-bottom: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.bottom{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">margin-top: 50px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="top">高为100px,下边距为100px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="bottom">高为100px,上边距为50px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr></tbody> </table> 효과는 다음과 같습니다. <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-2.png" alt=""> 이때 두 예시의 세로 방향은 약 100px(실제로는 100px) 정도입니다. ) 대신 100+50 =150px; 두 개의 수직 상자가 만날 때 수직 거리는 위쪽 상자의 아래쪽 여백과 아래쪽 상자의 위쪽 여백 중 더 큰 값과 같기 때문입니다. 　 또 다른 흥미로운 예는 margin-top과 margin-bottom이 동시에 설정된 요소가 있다고 가정해 보겠습니다. 내용이 비어 있으면 두 개의 여백 값도 겹쳐지며 그 값은 둘 중 가장 큰 값이 됩니다. 이는 세로 방향으로 두 상자의 여백 값을 중첩하는 것과 유사합니다. 코드는 다음과 같습니다. <table border="0"><tbody><tr class="firstRow"> <td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 </td> <td class="code"> <code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>水平方向的两个盒子</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{</code> <code class="html spaces"> </code><code class="html plain">margin:0;</code> <code class="html spaces"> </code><code class="html plain">padding:0;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.top{</code> <code class="html spaces"> </code><code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.middle{</code> <code class="html spaces"> </code><code class="html plain">margin-top: 100px;</code> <code class="html spaces"> </code><code class="html plain">margin-bottom:50px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.footer{</code> <code class="html spaces"> </code><code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="top">上面的p,高100px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="middle"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="footer">下面的p，高100px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr></tbody></table> 최종 효과는 다음과 같습니다. <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-3.png" alt=""> 위의 p와 아래의 p 사이의 예는 100+50=150px이 아니지만, 두 개는 100px입니다. 　 그렇다면 왜 W3C는 수평방향과 같은 기준을 정하지 않고 왜 이런 기준을 정하는 걸까요? 즉, 마진 값의 중첩이 실제로 의미가 있습니다. 예를 들어, 여러 단락으로 구성된 페이지를 디자인해야 합니다. 첫 번째 문단과 페이지 상단 사이, 마지막 문단과 하단 사이에 거리가 있도록 margin-top과 margin-bottom을 설정해야 합니다. 다음은 오버레이와 오버레이가 없는 렌더링입니다. <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-4.png" alt=""> 왼쪽 페이지가 겹치지 않는 것을 볼 수 있으므로 두 문단 사이의 예는 간격의 두 배입니다. 상단과 오른쪽 페이지가 겹치면 모든 간격이 동일합니다. 어쩌면 이런 기준을 세우는 목적이 아닐까, 누가 알겠는가? <h2>파트 3: 마진--상위 요소와 하위 요소 사이에 적용 (핵심 사항)</h2> 두 번째 부분 형제 요소 사이의 여백 사용을 소개하고, 이 부분에서는 부모 요소와 자식 요소 사이의 가장 흥미로운 여백 적용을 소개합니다. 이번 편에서도 두 가지 측면에서 논의해보겠습니다. 자식 요소는 가로 방향의 여백 값을 설정하고, 자식 요소는 세로 방향의 여백 값을 설정합니다. <h3> (1) 하위 요소의 가로 여백 값 설정 </h3> margin-left를 설정하여 하위 요소의 왼쪽 테두리와 상위 요소의 왼쪽 테두리 사이의 관계를 제어할 수 있습니다. . 예시 3: <table border="0"><tbody><tr class="firstRow"> <td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </td> <td class="code"> <code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code> <code class="html plain">*{padding:0; margin:0; border:0;}</code> <code class="html spaces"> </code><code class="html plain">.father{</code> <code class="html spaces"> </code><code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 500px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.son{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">margin-left: 100px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code> <code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">宽度为100px，margin-left为100px。</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr></tbody></table> 하위 요소의 왼쪽 여백을 100px로 설정했습니다. 효과는 다음과 같습니다. <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-5.png" alt="" style="max-width:90%" style="max-width:90%"> 즉, 하위 요소의 왼쪽 테두리 사이의 거리입니다. 상위 요소의 왼쪽 테두리는 100px입니다. 같은 레벨의 요소 사이의 마진은 패딩을 고려하지 않기 때문에 같은 레벨의 요소 사이에 마진을 설정하는 것과 다르지만, 패딩이 있는 경우에는 상위 요소와 하위 요소 간에 다릅니다. 부모 요소의 효과는 어떤 종류입니까? 다음 예를 참조하세요. 예 4: 다음으로 위 예를 기반으로 상위 요소에 패딩 값을 추가합니다. <table border="0"><tbody><tr class="firstRow"> <td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 </td> <td class="code"> <code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{padding:0; margin:0; border:0;}</code> <code class="html spaces"> </code><code class="html plain">.father{</code> <code class="html spaces"> </code><code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 500px;</code> <code class="html spaces"> </code><code class="html plain">padding:100px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.son{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">margin-left: 100px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">宽度为100px，margin-left为100px。</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code> <code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr></tbody></table> 위 코드는 상위 요소에 100px의 패딩 값을 추가합니다. <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-6.png" alt="" style="max-width:90%" style="max-width:90%"> 하위 요소 위의 거리가 100px임을 알 수 있습니다. , 자식 요소는 부모 요소의 콘텐츠 부분에 있어야 하기 때문에 의심의 여지가 없습니다. 그런데 측정한 결과 하위 요소의 왼쪽 테두리와 상위 요소의 왼쪽 테두리 사이의 거리가 200px임을 알 수 있습니다. 왼쪽 패딩 값도 있기 때문입니다. 이전 예는 패딩 값이 설정되지 않아 관찰되지 않기 때문입니다. 따라서 이는 하위 요소에 margin-left가 설정되어 있음을 의미하며 실제로는 왼쪽 테두리 사이의 거리입니다. 하위 요소의 내부와 상위 요소의 왼쪽 패딩 내부. 예시 5: margin-right의 사용은 margin-left의 사용과 유사합니다. 여기서는 예시만 제시하겠습니다. 이 예에서는 하위 요소의 margin-right 값을 다음과 같이 설정합니다. <table border="0"><tbody> <tr class="firstRow"> <td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 </td> <td class="code"> <code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{padding:0; margin:0; border:0;}</code> <code class="html spaces"> </code><code class="html plain">.father{</code> <code class="html spaces"> </code> <code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 500px;</code> <code class="html spaces"> </code><code class="html plain">padding:100px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code> <code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.son{</code> <code class="html spaces"> </code><code class="html plain">float: right;</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">margin-right: 100px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">宽度为100px，margin-right为100px。</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr> </tbody></table> 이 예시와 예시 4의 차이점은 하위 요소의 위치뿐입니다. 효과는 다음과 같습니다. <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-7.png" alt="" style="max-width:90%" style="max-width:90%"> 의 이 예는 margin-right 값이 하위 요소의 오른쪽 테두리 사이의 거리 임을 보여줍니다. 부모 요소의 오른쪽 패딩 내부. 다만 앞선 예시에서는 패딩을 사용하지 않아서 관찰할 수 없었을 뿐입니다. <h3> (2) 자식 요소에 세로 여백 값을 설정합니다 </h3> 이전 경험에 따르면 이론은 다음과 같습니다. 그 중에서 하위 요소의 상단 테두리와 상위 요소의 상단 패딩 내부 사이에 일정한 거리가 있도록 margin-top 값을 설정할 수도 있습니다. 그럼 한번 해보자! 예시 6: <table border="0"><tbody><tr class="firstRow"> <td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </td> <td class="code"> <code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{padding:0; margin:0; border:0;}</code> <code class="html spaces"> </code><code class="html plain">.father{</code> <code class="html spaces"> </code><code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 500px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.son{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">margin-top: 100px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">高度为100px，margin-top为100px。</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code> <code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr></tbody></table> 이 예에서는 margin-top을 100px로 설정했는데 효과는 다음과 같습니다. <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-8.png" alt="" style="max-width:90%" style="max-width:90%"> 이것은 우리가 원하는 효과가 아닙니다. 상위 요소가 상위 요소의 상위 부분과 100px 떨어져 있기를 원하지만, 우리가 보는 것은 상위 요소의 상위 부분이 브라우저 페이지의 상단 부분과 100px 떨어져 있다는 것입니다. 이유는 무엇입니까? 무엇이 잘못되었나요? 　 사실 이는 상위 요소에서 패딩 값과 테두리 값을 설정하지 않으면 버그가 발생하기 때문입니다. top과 하위 요소의 top은 완전히 겹쳐서 분리할 수 없습니다. 그렇기 때문에 위에서 언급한 상위 요소와 하위 요소가 동시에 아래쪽으로 이동합니다. 이 문제에 대한 해결 방법은 여러 가지가 있습니다. <ul class=" list-paddingleft-2"> <li>방법 1: 상위 요소에 padding -top<a href="http://www.php.cn/wiki/949.html" target="_blank"> value</a></li> <li>방법 2: 상위 요소에 테두리 값 추가</li> <li> 방법 3: Overflow:hidden; 속성 추가 </li> <li>방법 4: float 선언 </li> <li> 방법 5: 상위 요소 또는 하위 요소를 절대 위치<a href="http://www.php.cn/code/6074.html" target="_blank">로 선언: position:absolute;</a> </li> <li> 방법 6: 추가 상위 요소에 대한 속성 Overflow:auto; positon:relative; (참고: 이 방법은 나중에 추가됩니다. 이 방법을 제공한 블로거 @小elvesPawn에게 감사드립니다) </li> </ul>　방법 1: 예제 6을 기반으로 상위 요소의 CSS 코드에 padding-top:1px를 추가하면 다음과 같은 효과가 나타납니다. <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-9.png" alt="" style="max-width:90%" style="max-width:90%"> 이 방법의 유일한 단점은 오류가 1px 증가한다는 것입니다. 　 방법 2: 예제 6을 기반으로 상위 요소의 CSS 코드에 border-top:1px solid transparent를 추가합니다. 효과는 다음과 같습니다. <img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-10.png" alt="" style="max-width:90%" style="max-width:90%"> 도 동일한 효과를 얻을 수 있지만 단점은 동일합니다. 방법 1로. 　 방법 3: 예제 6을 기반으로 상위 요소의 CSS 코드에 Overflow:hidden을 추가하면 효과는 다음과 같습니다. : 　<img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-11.png" alt="" style="max-width:90%" style="max-width:90%"> 도 오류 없이 효과를 얻습니다. 완벽합니다!!! CSS 코드에 float:left;를 추가하거나 상위 요소 CSS 코드에 추가하면 동일한 그림이 더 이상 표시되지 않습니다. 장점: 픽셀 오류가 없습니다. 단점: float가 때때로 불필요합니다. 방법 5: 상위 요소 또는 하위 요소에 position:absolute 속성을 추가합니다. 동일한 효과가 달성됩니다. 장점: 방법 4와 동일합니다. 그리고 위쪽과 왼쪽을 사용하지 않는 한 아무런 영향도 미치지 않으므로 이 방법도 좋은 방법입니다. (설명: 블로그 친구 @laden666666은 위의 방법 3, 4, 5가 실제로는 하위 요소가 상위 컨테이너에 침투하지 못하도록 여백을 제거하는 방법이라고 지적했습니다. bfc 방식으로 분류할 수 있습니다. 기본적으로 동일합니다. 방법 6: 상위 요소에 Overflow:auto; 및 position:relative;를 추가합니다. 이 방법은 개인적으로 테스트되었으며 효과적입니다. 이 방법은 블로거 @작은엘브스Pawn이 제공합니다. 감사의 말씀을 전하고 싶습니다. 4부: 마진 값 단위가 %인 여러 상황 이전에 그 값을 예시할 때 마진을 사용했습니다. 모두 px 단위이므로 이해하는데 문제는 없습니다. 그런데 마진 값이 % 단위라면 어떨까요? 실제로 이때의 백분율(%)은 해당 요소의 부모 요소(컨테이너)를 기준으로 한 것이며, 이는 형제 요소와 부모-자식 요소 모두에 해당됩니다. (블로거 @小elvesPawn 님의 제안에 다시 한 번 감사드립니다!! 이 제안을 바탕으로 이 부분의 내용을 보완합니다.) 그런데 같은 레벨의 요소에 세로 여백을 사용할 경우 예상치 못한 결과가 발생하게 됩니다. 예. (1) 동일한 레벨의 요소는 가로 방향으로 %의 여백을 사용합니다. 예시 7: <h2></h2> <h3></h3> 1 2 3<table border="0"> 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <td class="code"> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{</code> <code class="html spaces"> </code><code class="html plain">margin:0;</code> <code class="html spaces"> </code><code class="html plain">padding:0;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.first{</code> <code class="html spaces"> </code><code class="html plain">float: left;</code> <code class="html spaces"> </code><code class="html plain">width: 200px;</code> <code class="html spaces"> </code><code class="html plain">height: 200px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.second{</code> <code class="html spaces"> </code><code class="html plain">float: left;</code> <code class="html spaces"> </code><code class="html plain">width: 200px;</code> <code class="html spaces"> </code><code class="html plain">height: 200px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">margin-left: 20%;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="first">宽为200，无margin</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="second">宽为200,margin-left为20%;</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </table> 이 예에서는 두 요소의 가로 여백을 쉽게 확인할 수 있도록 두 요소가 왼쪽으로 부동하도록 설정되었습니다. 그 중 왼쪽 p는 마진이 없고, 오른쪽 p의 왼쪽 마진은 20%입니다. <img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-12.gif" alt="" style="max-width:90%" style="max-width:90%"> 렌더링에서. , 두 p 사이의 간격을 볼 수 있습니다. 항상 상위 요소의 20%입니다(여기 오른쪽에 있는 p의 상위 요소는 본문이고 너비는 브라우저 너비입니다). <h3> (2) 같은 레벨의 요소는 세로 방향으로 %의 여백을 사용합니다. </h3> 예제에서 영감을 얻어 7, 수직 방향으로 마진을 사용하고 값 단위가 %라면 둘 사이의 최종 거리는 상위 요소(위 예에서는 본문)의 백분율이 될 것이라고 추측할 수 있습니다. 그렇다면 이것이 정말로 사실인가? 아래 예를 참조하세요. 예 8 <table border="0"><tbody><tr class="firstRow"> <td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </td> <td class="code"> <code class="html plain"><</code> <code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{</code> <code class="html spaces"> </code><code class="html plain">margin:0;</code> <code class="html spaces"> </code><code class="html plain">padding:0;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.first{</code> <code class="html spaces"> </code><code class="html plain">width: 200px;</code> <code class="html spaces"> </code><code class="html plain">height: 200px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.second{</code> <code class="html spaces"> </code><code class="html plain">width: 200px;</code> <code class="html spaces"> </code><code class="html plain">height: 200px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">margin-top: 10%;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="first">高为200，无margin</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="second">高为200,margin-top为20%;</</code><code class="html keyword">p</code> <code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr></tbody></table> 여기서 위쪽 p에는 마진이 없고, 아래쪽 p의 margin-top은 10입니다. 효과는 다음과 같습니다: <img src="https://img.php.cn/upload/article/000/000/007/73737215d222f61d1e7c7f1447c45d1b-13.gif" alt="" style="max-width:90%" style="max-width:90%"> 브라우저의 높이를 줄이면 수직 방향 간격은 줄어들지 않았습니다! ! ! 그리고 브라우저의 너비를 줄이면 수직 거리도 줄어듭니다! ! ! 즉, 여백은 통계 요소 사이의 세로 방향으로 사용됩니다. 값 단위가 %인 경우 상위 요소의 너비를 기준으로 합니다. 그렇다면 왜 우리가 원하는 대로 브라우저에 상대적인 높이가 아닌 걸까요? Zhihu의 마스터는 이렇게 설명했습니다(원본 주소: https://www.zhihu.com/question/20983035?rf=27109182): <img src="https://img.php.cn/upload/article/000/000/007/ba8858fe462ad9a8fb9cdcbc308e9ef1-14.png" alt="" style="max-width:90%" style="max-width:90%"> <h3></h3> <h3> </h3> <h3> (3) 부모 및 자식 요소는 %</h3> 값의 여백을 사용합니다. 하위 요소, 하위 요소에 사용된 단위가 %margin인 경우 여백 값은 상위 요소의 너비와 높이를 기준으로 합니다(참고: 이는 실제로 상위 요소의 높이를 기준으로 합니다!). 　 예제 9 　코드는 다음과 같습니다. <table border="0"><tbody> <tr class="firstRow"> <td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 </td> <td class="code"> <code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> 🎜><code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>Document</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">.father{</code> <code class="html spaces"> </code><code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 300px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">overflow: hidden;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.son{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">margin-top: 20%;</code> <code class="html spaces"> </code><code class="html plain">margin-left: 20%;</code> <code class="html spaces"> </code> <code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr> </tbody></table> 이 예에서는 margin-left 값을 20%, margin-top 값을 20%로 설정하고 상위 요소의 너비는 500px, 높이는 상위 요소는 300px입니다. 아래에서 효과를 살펴보겠습니다. <img src="https://img.php.cn/upload/article/000/000/007/856d2f11c3d8af9a226d1a5f5414cef7-15.png" alt="" style="max-width:90%" style="max-width:90%"> 위 그림에서 볼 수 있듯이 하위 요소의 margin-top 값은 궁극적으로 높이가 아닌 상위 요소의 너비에 상대적입니다. .

위 내용은 CSS의 여백 속성에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!