CSS의 여백, 테두리 및 패딩의 차이점

CSS 패딩 여백 테두리 속성에 대한 자세한 설명

CSS 패딩, 여백 및 테두리 속성 그림

W3C 조직에서는 웹 페이지의 모든 개체를 상자에 배치할 것을 권장합니다. 디자이너는 개체 속성 정의를 생성하여 이 상자를 제어할 수 있습니다. 단락, 목록, 제목, 그림 및 레이어를 포함합니다. 박스 모델은 주로 내용, 패딩, 테두리 및 여백의 네 가지 영역을 정의합니다. 초보자의 경우 margin, background-color, background-image, padding, content, border 간의 수준과 관계, 상호 영향에 대해 혼란스러워하는 경우가 많습니다. 다음은 박스 모델의 3D 개략도입니다. 이해하고 기억하기가 더 쉽기를 바랍니다.

margin：层的边框以外留的空白
background-color：背景颜色
background-image：背景图片
padding：层的边框到层的内容之间的空白 
border：边框 
content：内容

다음으로 HTML과 CSS의 핵심인 박스 모델에 대해 이야기하겠습니다. Box 모델을 이해하는 열쇠는 margin과 padding 속성이며, 이 두 속성을 올바르게 이해하는 것도 CSS 레이아웃 사용법을 배우는 열쇠입니다.

참고: 여백과 패딩을 번역하면 어떨까요?
이유 1: 중국어에는 해당 단어가 없습니다.
이유 2: 그런 단어가 있어도 CSS 코드를 작성할 때는 반드시 마진을 사용해야 합니다. 그리고 패딩을 중국어 단어로 설명한다면 실제 응용에서 마진과 패딩의 개념을 혼동하기 쉽습니다.

Html에 대한 기본 지식이 있다면 p, h1~h6, br, div, li, ul, img 등과 같은 몇 가지 기본 요소(Elements)를 알아야 합니다. 이러한 요소를 세분화하면 최상위 요소, 블록 수준 요소, 인라인 요소로 나눌 수 있습니다.

블록 수준 요소는 HTML을 구성하는 주요 요소이며, 모든 블록 수준 요소는 Box 모델을 사용하여 설명할 수 있습니다.
박스 모델: 모든 블록 수준 요소는 내용, 패딩, 배경(배경색 및 그림 포함), 테두리, 여백의 다섯 부분으로 구성됩니다.
입체적으로 보면 다음과 같습니다.

평면도는 다음과 같습니다.

위 두 사진을 보면 누구나 Box 모델에 대해 직관적으로 이해하실 수 있으실 거라 믿습니다.

다음은 여백 및 패딩 속성에 대한 설명입니다.
1. 여백: margin-top, margin-right, margin-bottom, margin-left를 포함하며, 는 블록 사이의 공간을 제어합니다. -레벨 요소 거리 , 투명하고 보이지 않습니다. 위, 오른쪽, 아래, 왼쪽의 시계방향 규칙에 따라 여백: 40px 40px 40px 40px;
쉽게 기억하려면 아래 그림을 참고하세요.

위, 아래, 왼쪽, 오른쪽 여백 값이 동일한 경우 다음과 같이 축약할 수 있습니다.

margin: 40px 40px; 

처음 40px은 상한 및 하한 여백 값을 나타내고, 뒤의 40px은 왼쪽 및 오른쪽 여백 값을 나타냅니다.
위, 아래, 왼쪽, 오른쪽 여백 값이 일치하는 경우 다음과 같이 축약할 수 있습니다.

margin: 40px;

2. 패딩: padding-top, padding-right, padding-bottom, padding-left를 포함하여 는 블록 수준 요소 내부의 과 콘텐츠 및 테두리 사이의 거리를 제어합니다. 및 약어. 여백 속성을 작성하는 방법.

이제 기본적으로 margin 및 padding 속성의 기본적인 사용법을 이해했습니다. 그러나 실제 적용에서는 항상 파악할 수 없는 몇 가지 사항이 있으며 이는 마진과 어느 정도 관련이 있습니다.

참고: 두 요소의 콘텐츠를 수직으로 분리하려면 패딩 상단/하단 또는 여백 상단/하단을 선택한 다음 Ruthless 다음을 수행하는 것이 좋습니다. 목적을 달성하려면 padding-top/bottom을 사용하십시오. 이는 CSS에서 여백이 무너지는 현상이 있기 때문입니다.

여백 축소: 여백 축소 현상은 인접 또는 하위 요소의 수직 여백에만 존재합니다.

자세한 내용은 다음과 같습니다.
1개만 제공하면 4개 면 모두 사용
2개 제공 시 첫 번째는 업다운, 두 번째는 사용됩니다. for left-right
세 개가 제공되면 첫 번째는 위쪽, 두 번째는 왼쪽-오른쪽, 세 번째는 아래쪽입니다.
네 가지 매개변수 값이 모두 제공되면 위쪽-오른쪽입니다. -왼쪽 아래를 누르면 순서가 네 면에 작용합니다.

body { padding: 36px;} //对象四边的补丁边距均为36px 
body { padding: 36px 24px; } //上下两边的补丁边距为36px，左右两边的补丁边距为24px 
body { padding: 36px 24px 18px; } //上、下两边的补丁边距分别为36px、18px，左右两边的补丁边距为24px 
body { padding: 36px 24px 18px 12px; } //上、右、下、左补丁边距分别为36px、24px、18px、12px

원본 링크: http://www.cnblogs.com/linjiqin/p/3556497.html