CSS 속성 여백

0. 자체 시각적 너비에 미치는 영향

1> 너비 값이 설정되지 않은 표준 문서 흐름에서 블록 요소의 시각적 너비 변경

표준 문서 흐름에서 너비가 설정되지 않은 블록 요소의 경우 콘텐츠가 있거나 높이가 설정되면 자체 너비는 상위 요소 너비의 100%가 됩니다. 블록 요소의 가로 여백 값은 요소의 시각적 너비를 변경합니다. 그러나 블록 요소의 높이는 고정되거나 내용의 높이와 동일하고 늘어나지 않기 때문에 높이를 변경할 수 없습니다.

이 기능은 부트스트랩 레이아웃에 유용합니다.

<p class="wrap">
  父元素padding: 0 10px;  <p class="yellow">此block元素没有设置margin值</p>
  <p class="red">此block元素设置margin-left:-10px;margin-right:-10px; 拉伸了元素宽度</p></p>

* {margin:0; padding:0;}.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  padding: 0 10px;
  border: 1px solid #ccc;
}.red {
  height: 100px;
  background-color: red;
  margin: 0 -10px;
}.yellow {
  height: 100px;
  background-color: yellow;  
}

2> 포지셔닝(상/하, 좌/우 등 쌍으로 포지셔닝 설정)이 있는 절대 위치 요소의 가시적 너비와 높이

절대 위치 요소가 너비를 설정하지 않고 상/하, 왼쪽을 설정하는 경우 /right 값으로 설정되면 요소가 늘어납니다. 예를 들어 left:0; right:0;을 설정하면 요소의 너비는 상대적으로 배치된 첫 번째 상위 요소 너비의 100%가 됩니다. 이때 요소의 시각적 너비를 변경할 수도 있습니다. 여유. 마찬가지로 절대 위치에 있는 요소의 경우 시각적 높이를 변경할 수도 있습니다.

아아아아

아아아앙

퍼센트

값의 여백은 일반적으로 표준 문서 흐름에 있는 요소의 경우 요소의 여백 값이 백분율 값인 경우 실제 값은 패딩과 동일합니다. 상위 요소 * 백분율;

요소가 절대 위치 지정으로 설정된 경우 실제 값은 해당 요소를 기준으로 배치된 첫 번째 상위 요소의 너비 * 백분율과 같습니다

<p class="wrap">
  父元素position: relative;  <p class="yellow">绝对定位,并且设置top:0; bottom:0; 垂直拉伸元素，通过设置margin来改变可视高度</p></p>

* {margin:0; padding:0;}.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.yellow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  margin: 50px 0;
  background-color: yellow;  
}

2. 여백 겹침

여백 겹침은 일반적으로 형제 요소와 부모 요소 간에 발생합니다. 주의를 기울이지 않으면 마진 겹침 Overlap이 종종 사소한 문제를 일으킬 수 있습니다. 다음은 마진 겹침이 발생하는 상황을 요약한 것입니다.

1>동위 요소 사이

두 요소에 여백이 겹치는 경우 실제 값은 다음과 같습니다.

1. 두 여백 값이 모두 양수인 경우 실제 값 = 둘 중 큰 값

2. 두 여백 값이 하나는 양수이고 하나는 음수인 경우 실제 값 = 두 값의 합 ​

3. 두 마진 값이 모두 음수인 경우 실제 값 = 두 마진 중 더 큰 절대값

마진 겹침은 언제 발생하나요?

인접한 두 형제 요소의 경우 표준 문서 흐름에서 블록 요소인 경우 세로 방향으로 여백 겹침이 발생합니다.

2>상위 요소와 첫 번째/마지막 하위 요소 사이

1. 테두리 상단/하단 설정

2. 설정 padding-top/bottom

3. overflow:hidden/auto와 같은 속성을 설정하여 BFC의 auto 값을 실현합니다

3.margin

여백 설정: 0 auto; 고정 너비 블록 요소가 요소를 수평으로 가운데에 배치하도록 합니다. 이는 많은 사람들이 일반적으로 사용하지만 auto 값의 구체적인 역할을 아는 사람은 거의 없습니다.

간단히 말하면 너비나 높이 값이 고정되지 않은 요소가 자동으로 늘어나는 경우 고정 값을 설정한 후 auto를 사용하여 남은 공간을 할당할 수 있습니다.

발음이 좀 어려운 것 같습니다. 예를 들어 너비가 고정된 블록 요소가 있는데, 가장 일반적으로 사용되는 방법은 float 속성을 사용하는 것입니다. 하지만 margin-left: auto;:

<p class="wrap">
  父元素宽度400px;  <p class="yellow">margin-top:10%; 实际的margin-top=400px*10%=40px</p></p>

* {margin:0; padding:0;}.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.yellow {
  width: 200px;
  height: 200px;
  margin-top: 10%;
  background-color: yellow;  
}

여백 값을 자동 포함으로 설정하는 유효한 시나리오:

1. 일반적인 고정 너비 블록 요소, 가로 방향 설정이 유효합니다.

2. 절대적으로 배치된 요소, 왼쪽/오른쪽 쌍으로 설정되면 상단이 설정됩니다. /bottom 또는 둘 다 설정되면 고정 너비 또는 고정 높이가 유효합니다.

3. 상위 요소가 다음과 같은 경우; display: flex;, 하위 요소 여백 값은 자동이며 유효합니다.

더 많은 CSS 속성 여백 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!