CSS 여백 테두리 오버레이에 대한 심층 분석을 그래픽으로 시연_경험 교환

경계 오버레이는 매우 간단한 개념입니다. 그러나 실제로 웹페이지를 레이아웃할 때 많은 혼란을 야기할 수 있습니다. 간단히 말해서 두 개의 수직 경계가 만나면 경계가 형성됩니다. 이 경계의 높이는 겹쳐진 두 경계의 높이 중 더 큰 것과 같습니다.

요소가 다른 요소 위에 나타나면 그림과 같이 첫 번째 요소의 아래쪽 테두리가 두 번째 요소의 위쪽 테두리와 겹칩니다.

요소의 위쪽 테두리가 이전 요소의 아래쪽 테두리와 겹칩니다.

한 요소가 다른 요소 내에 포함된 경우(요소를 구분하는 패딩이나 테두리가 없다고 가정) 테두리가 열려 있음) 상단 및/또는 하단 경계도 겹쳐집니다. 그림을 참조하세요.

요소의 위쪽 테두리가 상위 요소의 위쪽 테두리와 겹칩니다.

처음에는 조금 이상해 보일 수도 있지만 테두리가 자체적으로 겹칠 수도 있습니다. 빈 요소가 있고 테두리는 있지만 테두리나 패딩은 없다고 가정해 보세요. 이 경우 그림과 같이 위쪽 경계선과 아래쪽 경계선이 서로 닿아 겹쳐지게 됩니다.

요소의 위쪽 및 아래쪽 테두리가 겹칩니다.

이 테두리가 다른 요소의 테두리와 닿으면 그림과 같이 겹칩니다.

빈 요소의 겹치는 테두리가 다른 빈 요소의 테두리와 겹칩니다.

이것이 바로 일련의 빈 단락 요소가 공간을 거의 차지하지 않는 이유입니다. 테두리가 함께 추가되어 작은 테두리를 형성합니다.

테두리 오버레이가 처음에는 조금 이상해 보일 수도 있지만 실제로는 의미가 있습니다. 여러 단락으로 구성된 일반적인 텍스트 페이지를 예로 들어 보겠습니다(그림 2-8 참조). 첫 번째 단락 위의 공간은 단락의 위쪽 여백과 같습니다. 테두리 오버레이가 없으면 모든 후속 단락 사이의 테두리는 인접한 위쪽 및 아래쪽 테두리의 합이 됩니다. 이는 단락 사이의 공간이 페이지 상단의 두 배라는 것을 의미합니다. 테두리 겹침이 발생하는 경우 문단 사이의 상단 및 하단 테두리가 겹쳐져 모든 곳의 거리가 일정해집니다

테두리 오버레이는 요소 간 일정한 거리를 유지합니다.

테두리 오버레이는 일반적인 문서 흐름에서 블록 상자의 수직 경계에서만 발생합니다. 인라인 상자, 부동 상자 또는 절대 위치 상자 사이의 경계는 겹치지 않습니다.

　테두리 오버레이 문제
테두리 오버레이는 잘못 이해하면 많은 문제를 일으킬 수 있는 CSS 기능입니다. div 요소 내 중첩된 단락의 간단한 예를 참조하세요.

코드 복사 코드는 다음과 같습니다.

이 문단의 여백은 20px입니다.

>div 상자는 10픽셀 테두리로 설정되고 단락은 20픽셀 테두리로 설정됩니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다: #box{

margin:10px

background-color:#d5d5d5
}
p{
margin:20px; > background-color:#6699ff;
}


결과 스타일은 자연스럽게 그림 1-1과 같고 단락과 div 사이에 20픽셀 간격이 있을 것이라고 생각할 것입니다. div 외부 주위에는 10픽셀 테두리가 있습니다.

그림 1-1

그러나 결과 스타일은 실제로 그림 1-2와 같습니다.

그림 1-2

CSS 여백 테두리 오버레이 심층 분석 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <meta name="author" content="Stuart Colville"> <style type="text/css"> #box{ margin:10px; background-color:#d5d5d5; } p{ margin:20px; background-color:#6699ff; } </style>이 문단의 여백은 20px입니다.
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

여기서 두 가지 일이 일어났습니다. 조건. 먼저, 단락의 20픽셀 위쪽 및 아래쪽 테두리가 div의 10픽셀 테두리와 겹쳐 단일 20픽셀 세로 테두리를 형성합니다. 둘째, 이러한 테두리는 DIV로 둘러싸이지 않고 DIV의 위쪽 및 아래쪽 가장자리 너머로 돌출됩니다. 이 동작은 블록 수준 하위 항목이 있는 요소가 높이를 계산하는 방식으로 인해 발생합니다.

요소에 세로 테두리나 패딩이 없는 경우 해당 요소의 높이는 포함된 하위 요소의 위쪽 및 아래쪽 테두리 가장자리 사이의 거리입니다. 따라서 포함하는 하위 요소의 위쪽 및 아래쪽 여백이 컨테이너 요소 외부로 돌출됩니다. 그러나 간단한 해결책이 있습니다. 수직 테두리 또는 패딩을 추가하면 공백이 더 이상 겹치지 않으며 요소의 높이는 포함된 하위 요소의 위쪽 및 아래쪽 공백 가장자리 사이의 거리입니다.

이전 예를 그림 1-1과 같이 만들려면 div 주위에 패딩이나 테두리를 추가하세요.

코드 복사 코드는 다음과 같습니다:

#box{
margin:10px;
padding:1px;/*or border:1px solid color;*/
background -color:#d5d5d5;  
}  
p{  
margin:20px;  
background-color:#6699ff; 대부분의 문제는 투명한 테두리나 1px 패딩을 추가하여 해결할 수 있습니다.

보완 솔루션:

코드 복사

코드는 다음과 같습니다. 1. 외부 패딩

2. 투명 테두리 테두리:1px 솔리드 투명

3. 절대 위치 위치:절대:
4. 외부 DIV 오버플로: 숨김
5. 내부 DIV 추가 float:left; display:inline;
6. 외부 DIV는 때때로 Zoom:1을 사용합니다.