원천: 여백 또는 패딩?
필립 스포러.
번역: vl49.

여백을 사용하는 것이 더 나은 경우와 서식 지정을 위해 패딩을 사용하는 것이 더 나은 경우와 그것이 중요합니까?

나는 적당한 답을 찾기 위해 아주 오랫동안 고군분투했다. 그리고 여러 가지 부작용과 함께 끔찍하고 읽을 수 없는 CSS 코드를 많이 작성한 후에야 위에 나열된 문제에 대한 기본적인 철칙을 찾았다고 자신 있게 말할 수 있었습니다.

명확성을 위해 모든 개발자에게 잘 알려진 일반적인 상황을 살펴보겠습니다. 사용자 인터페이스 2017년. 가장 간단한 카드 템플릿이 있습니다.

에 이 예간격에는 두 가지 유형이 있습니다.

링크할 때 서로 연결되어서는 안 되는 두 개의 서로 다른 개념을 다루고 있다는 점을 여기서 이해하는 것이 매우 중요합니다. 즉, 카드와 컨테이너 사이의 거리를 변경해야 하는 경우(예: 최대 24픽셀) 이는 카드 자체 사이의 간격에 어떤 식으로든 영향을 미치지 않아야 합니다.

CSS로 예제를 구현하시겠습니까?

여백과 여백을 사용하여 이러한 템플릿을 만드는 방법은 말 그대로 수천 가지가 있지만 여백 및 여백 속성을 올바르게 사용하는 방법을 보여 주는 방법 중 하나를 알려드리고자 합니다. 또한 이 방법을 사용하면 나중에 다른 카드를 추가할 수 있습니다.

컨테이너(
패딩: 16px
}
.카드 + .카드(
여백: 0 0 0 8px;
}

2개의 선택자와 2개의 규칙만 있으면 됩니다.

더하기 기호의 기능은 무엇입니까?

상징 +는 인접한 선택기. 이 선택자 앞에 지정된 요소 바로 다음에 오는 요소만 가리킵니다.

위의 이미지에서 볼 수 있듯이 우리의 경우 이 선택기가 다음을 선택합니다. 모든 카드 앞에 다른 모든 카드. 따라서 인접한 선택기를 사용하여 첫 번째 카드를 제외한 모든 카드의 왼쪽 여백을 설정할 수 있습니다.

이것은 우리가 필요한 만큼의 카드를 추가할 수 있음을 의미하며, 그 사이의 거리는 항상 8픽셀입니다.

카드 옆에 카드 이외의 것을 배치해야 할 때까지 모든 것이 잘 작동합니다. 글쎄, 버튼을 말하자 "카드 추가" ("카드 추가"):

이미 가지고 있는 CSS 스니펫을 기반으로 버튼을 나타내는 새 요소는 카드가 아니기 때문에 .card 클래스를 제공하지 않을 것입니다. 어떻게 될 것인가? .card 클래스와 여백 속성이 동일한 규칙을 포함하는 추가 클래스 이름 .add-card 를 만드는 것이 가치가 있습니까? 아니요, 더 나은 솔루션이 있습니다.

Lobottomized 올빼미 ** .

그리고 그것은 어떻게 생겼습니까? 재미있는 연관성에도 불구하고 이 방법은 훌륭하게 작동하며 이 방법을 알게 된 이후로 항상 사용하고 있습니다. 이 모든 것이 무엇을 위한 것입니까? 관련 CSS 코드를 살펴보면 다음과 같습니다.

컨테이너(
패딩: 16px
}
/* 자, 절단된 올빼미를 알아보셨나요? */
.컨테이너 > * + * (
여백: 0 0 0 8px;
}

아마 기억하시겠지만, 이전 선택기는 다른 카드가 선행된 모든 카드에 적용되었습니다. 이제 도움을 받아 포맷할 수 있습니다. 다른 요소가 바로 앞에 오는 모든 요소, 물론 버튼을 포함하여.

결국.

여기 제시된 자료가 패딩을 사용하여 컨테이너에 포함된 내용을 구분할 때와 여백을 사용할 때를 파악하는 데 도움이 되었기를 진심으로 바랍니다.

결론적으로 나는 위의 예를 보여주는 펜 프로젝트와 내 경험에 의해 확인된 두 가지 규칙을 고려하여 제시하고자 합니다. 따라서 다음을 사용합니다.

심- 컨테이너와 내용물 사이의 공간.

여유- 컨테이너 내부의 요소 사이의 간격.

게시물 조회수: 427

안녕하세요, 블로그 사이트 독자 여러분. 오늘 저는 연구 주제를 계속하고 들여쓰기와 테두리를 설정할 수 있는 스타일 규칙을 고려하고 싶습니다. HTML 요소: 테두리, 여백 및 패딩.

그 전에 우리는 글꼴(), 텍스트()를 제어하는 ​​다소 단순한 속성을 연구하고 모델을 검토했습니다.

예, 우리는 또한 모든 세부 사항에서 사용 원칙을 고려했습니다(여러 기사로 확장). 이제 문서(웹 페이지) 작성의 기초를 형성하는 규칙으로 넘어갈 때입니다. 블록 모델(Html ​​요소의 관계)부터 시작하겠습니다.

일반적으로 나는 이미 현대에 대해 썼지만 오늘은 순수한 세부 사항이 있을 것입니다. 주제에 대한 이전 간행물을 읽고 싶다면 언제든지 환영합니다.

CSS 상자 모델 - 패딩, 여백 및 테두리

셋째, 백분율을 사용할 수 있습니다. 그들은 무엇에서 간주됩니까? 그것은 밝혀 컨테이너 너비에서(즉, 콘텐츠 영역에서 부모 요소). 더욱이 이것은 논리적인 margin-right 및 left에만 적용되는 것이 아니라 margin-top 및 bottom에 대해 백분율이 컨테이너의 너비(높이가 아님)에서 계산됩니다.

치수 값 설정에 대해 말할 때 여백은 부정적일 수도 있다. 저것들. 외부 들여쓰기에 양수 값을 설정할 때 인접 요소를 지정된 거리로 이동하고 음수 값을 지정하면 인접 블록은 단순히 이 음수 들여쓰기를 설정한 블록으로 이동합니다. 그리고 이것은 CSS에서 매우 자주 사용됩니다.

글쎄, 많은 경우에 필요한 여백을 설정하는 데 사용되는 코드의 크기를 줄일 수 있도록 하는 사전 제작된 CSS 여백 규칙이 있다는 것은 말할 필요도 없습니다. 값의 순서는 엄격하게 규제되며(공백 문자를 통해 작성됨) 패턴과 일치해야 합니다.

저것들. 열거는 상단(상단)에서 시작하여 계속됩니다. 시계 방향으로오른쪽 들여쓰기(오른쪽)가 있는 원의 끝까지. 다음과 같이 보일 수 있습니다.

여백: 20px 10px 40px 30px;

이것은 브라우저가 우리 블록 위로 20픽셀, 오른쪽으로 10픽셀, 아래쪽으로 40픽셀, 왼쪽으로 30픽셀 들여쓰기해야 함을 의미합니다. 이 항목은 다음과 같습니다.

단축 CSS 코드는 육안으로 볼 수 있습니다. 그러나 이것이 한계가 아닙니다. 조립식 규칙에서 4개뿐 아니라 3개, 2개, 심지어 하나의 값만 사용하는 것은 완벽하게 허용됩니다. 코드 크기를 줄이는 데 더 도움이 됩니다. 그러나 특정 경우에만 값의 수를 줄이는 것이 가능합니다.

1. 왼쪽 및 오른쪽 여백이 동일한 경우, 예: margin:20px 30px 40px 30px;

   마지막 것은 생략할 수 있습니다.

   여백: 20px 30px 40px;

   이 두 수집 규칙 항목은 동일한 작업을 수행합니다. 따라서 Margin에 3개의 값이 있는 항목을 보면 네 번째 값(오른쪽)을 두 번째 값(왼쪽)에서 볼 수 있습니다.

   위와 아래에서 동일한 들여 쓰기의 경우 논리적으로 프리캐스트 규칙 항목의 구조를 줄이는 것이 가능하기 때문에 이러한 트릭은 더 이상 작동하지 않습니다. 끝에서 중복 값 잘라내기(하단 들여쓰기의 값은 끝에서 두 번째가 됩니다).

2. 왼쪽과 오른쪽의 여백의 평등 외에도 위와 아래의 값이 같은 경우 margin:20px 30px 20px 30px;

   또는 동일합니다(포인트 1에 의해):

   여백: 20px 30px 20px;

   이러한 조립식 규칙은 첫 번째 값과 일치하는 마지막 값을 버리고 단 두 개의 값으로 작성할 수 있습니다.

   여백: 20px 30px; 이 경우 첫 번째 값은 세로 여백을 설명하고 두 번째 값은 가로 여백을 설명합니다.

3. 마지막으로 프리캐스트 규칙의 모든 값이 동일한 경우 margin:20px 20px 20px 20px;

   또는 동일합니다(포인트 2로 인해):

   여백: 20px 20px;

   사용할 수 있는 가장 짧은 레코드 유형(첫 번째와 일치하는 마지막 값을 버립니다):

   여백: 20px; Html 요소의 모든 면에서 동일한 외부 들여쓰기를 의미하는 것은 무엇입니까?

마진에 대해 말하면 다음과 같은 계획을 언급 할 가치가 있습니다. "여백 축소"즉, "마진 붕괴". 이 현상의 본질은 간단히 말해서 다음과 같다.

한 블록이 다른 블록 아래에 있고(여백은 수직으로만 축소될 수 있음) 두 블록의 여백이 반대인 경우(예: 맨 위 요소의 경우 맨 아래, 맨 아래의 경우 맨 위 여백), 더 큰 여백 값은 더 작은 것을 흡수합니다. 하나.

예를 들어, 상단 블록이 다음과 같이 설정된 경우:

여백: 20px 20px 200px 20px;

그리고 하단:

여백: 100px 20px 20px 20px;

그러면 위쪽 블록의 아래쪽 여백(200px)이 아래쪽 블록(100px, 199px와 같아지더라도 아무 것도 변경되지 않음)의 위쪽 여백을 흡수하고 이 두 블록 사이의 결과 외부 들여쓰기는 여전히 200px입니다. 저것들. 더 큰 것만 고려됩니다.모듈로 여백이며 수직으로 이웃하는 요소의 반대 값과 어떤 식으로든 합산되지 않습니다.

이것은 수직으로만 작동하는 트릭이며 수평으로 반대 여백 크기가 단순히 서로 추가됩니다. 그러나 이것은 동일한 부호를 가진 여백에 관한 것이지만 부호가 다른 경우 숫자가 단순히 합산되고 결과 값에 의해 블록이 서로 분리됩니다.

예를 들어 이 경우:

상단 여백: 20px 20px -20px 20px; 하단 여백: 10px 20px 20px 20px;

블록 사이의 결과 패딩은 -10px입니다. 하단 10px는 상단 HTML 요소 위로 실행됩니다.

CSS에서 여백 규칙을 사용하는 또 다른 기능은 지정된 값이 인라인 요소의 수직은 무시됩니다.. 질문하여:

여백: 20px;

예를 들어 인라인 요소인 의 경우 실제로 수평 패딩만 표시되고 수직 변경은 발생하지 않습니다.

조금 앞을 내다보면 인라인 태그에 대한 Padding이 세로로 작동하지만 들여쓰기가 증가해도 다른 인접 요소에 대한 일반적인 위치에는 영향을 미치지 않습니다.

블록 태그(제목, 단락)의 경우 세로로 증가된 패딩은 다른 인접 블록에 대해 이 요소를 이동합니다.

프레임(테두리) 또는 너비도 인라인 태그에서 수직으로 다른 인접 블록을 이동할 수 없습니다. 인라인 요소의 경우 수평 방향으로만 이동이 가능합니다.

패딩 및 테두리 - 패딩 및 테두리

이제 패딩 규칙을 사용하여 패딩을 설정하고 어떤 값을 취할 수 있는지 살펴보겠습니다.

보시다시피 여기에 Auto에 대한 언급이 없으며 이 CSS 규칙은 음수 값을 허용하지 않습니다(0 이상에서 양수만 가능). 저것들. 패딩의 도움으로 콘텐츠를 프레임 밖으로 밀어낼 수 없습니다. 할 수 있는 최대값은 콘텐츠를 프레임에 가깝게 가져오는 것입니다.

그 안의 백분율은 여백과 같은 방식으로 계산됩니다 - 우리 요소가 포함된 컨테이너의 너비(부모 요소의 콘텐츠 영역)를 기준으로 합니다. CSS의 조립식 패딩 규칙위에서 논의한 것과 동일한 법칙을 형성하고 준수합니다.

패딩:20px 10px 40px 30px;

이 규칙에서는 위에서부터 4면을 모두 설명합니다. 그 안에 있는 무언가를 줄여야 하는 경우(최대 3개, 2개 또는 하나의 값까지) 외부 들여쓰기에 대해 바로 위에서 설명한 축소 원칙을 사용해야 합니다. 이는 내부 들여쓰기에 대해 정확히 동일한 성공으로 작동합니다.

그리고 오늘 제가 마지막으로 고려하고 싶은 것은 다음을 사용하여 설정한 프레임워크입니다. 국경. 세 가지 유형의 매개변수가 있습니다.

1. 테두리 너비 - 테두리 너비를 설정합니다.
2. 테두리 색상 - 색상을 설정합니다.
3. 테두리 스타일 - 그릴 프레임 유형 또는 선 유형

이 세 가지 CSS 규칙에는 모두 유효한 값 집합이 있습니다.

테두리 선 너비( 테두리 너비) Em, Ex 또는 Px의 숫자와 다음 단어를 사용하여 지정할 수 있습니다.

1. 가는 - 가는 선;
2. 중간 - 중간(이 값은 기본적으로 사용됨).
3. 두껍다 - 두껍다.

테두리 색상 값으로( 테두리 색상) 이를 지정하기 위해 허용되는 방법(16진수 코드, 단어 등)을 사용할 수 있습니다.

테두리 색상:빨간색;

기본적으로 테두리의 색상이 명시적으로 설정되지 않은 경우 지정된 요소 내부의 글꼴에 사용된 색상이 사용됩니다.
테두리 스타일 CSS 속성을 사용하면 테두리 유형을 단어로 설정할 수 있습니다.

1. 없음 - 테두리 없음(기본값)
2. 점선 - 선이 점으로 그려집니다.
3. 파선 - 점선
4. 실선 - 실선
5. 더블 - 더블 라인
6. 홈 - 들여쓰기 프레임
7. 능선 - 불룩
8. 시작과 시작 - 그림자 게임

당연히 어떤 블록이든 4면이 있으므로 다음과 같이 사용할 수 있습니다. 일반적인 규칙, 각 당사자에 대해 별도:

에도 동일하게 적용됩니다 프리캐스트 규칙 테두리- 동시에 모든 면에 대해(테두리), 각 면에 개별적으로(테두리-위, 왼쪽, 아래, 오른쪽) 모두 쓸 수 있습니다. 값의 순서는 중요하지 않습니다.

테두리:1px 단색 빨간색;

무언가가 생략되면 기본값이 대신 사용됩니다.

행운을 빕니다! 블로그 페이지 사이트에서 곧 만나요

당신은 관심이있을 수 있습니다

높이, 너비 및 오버플로 - 블록 레이아웃의 콘텐츠 영역을 설명하기 위한 CSS 규칙
위치(절대, 상대 및 고정) - CSS에서 HTML 요소를 배치하는 방법(왼쪽, 오른쪽, 위쪽 및 아래쪽 규칙) 인테리어를 위한 다양한 디자인과 외부 링크 CSS를 통해
CSS에서 부동 및 지우기 - 블록 레이아웃 도구
CSS에서 표시(차단, 없음, 인라인) - 웹 페이지에서 HTML 요소의 표시 유형 설정
목록 스타일(유형, 이미지, 위치) - 사용자 정의할 CSS 규칙 모습목록에 HTML 코드
CSS의 배경(색상, 위치, 이미지, 반복, 첨부) - 모두 배경색 설정 또는 배경 그림 HTML 요소
CSS가 무엇인지, CSS 스타일 시트를 연결하는 방법 HTML 문서이 언어의 기본 구문 n번째 자식 의사 클래스를 사용하여 사이트의 테이블, 목록 및 기타 HTML 요소 행의 배경색을 변경하는 방법
CSS에서 글꼴 스타일 지정을 위한 글꼴(가중치, 패밀리, 크기, 스타일) 및 줄 높이 규칙

포럼의 Shastaya는 질문이 여전히 발생한다는 사실을 발견했습니다. 심, 그리고 뭐 여유그리고 그들 사이의 차이점은 무엇입니까? 그래서 나는 그것에 대해 기억하기로 결정했습니다. 따라서 난해한 문구에 의존하지 않고 작업을 설정하고 모든 것이 명확해질 예를 분석합시다.

작업: 페이지에서 빨간 블록이 필요하다(200x200픽셀), 브라우저의 가장자리에서 멀어집니다.위쪽과 왼쪽에 각각 40픽셀과 70픽셀, 왼쪽과 위쪽에서 들여쓰는 내부 텍스트 40픽셀 단위로

해결책: 그림과 코드를 보세요. 빨간색 블록은 200 x 200픽셀을 초과해서는 안 되며 브라우저(또는 다른 콘텐츠 블록)의 가장자리에서 채워져야 합니다. 실제로 우리는 여백을 통해 이러한 들여쓰기를 수행합니다. 패딩을 수행하면 빨간색 블록 내부에서 패딩이 발생하고 블록 자체의 배경(즉, 빨간색)으로 패딩을 얻습니다.

사용된 속성(6-9행) 외에도 margin-right, padding-right, margin-bottom, padding-bottom 속성이 있습니다. 각각 오른쪽과 아래쪽 들여쓰기를 위한 것입니다. 이러한 모든 속성의 값은 픽셀(px), 백분율(%) 또는 em 단위가 될 수 있습니다.

기본적으로 그게 전부입니다. 그러나 그들과 함께 작업하는 몇 가지 다른 기능이 있습니다.

여백과 패딩의 특징

패딩을 사용할 때 블록의 높이와 너비에서 패딩의 크기를 빼야 합니다. 그렇지 않으면 블록의 크기가 패딩의 크기만큼 증가합니다.

일부 블록에 대해 자동 값으로 margin-left 및 margin-right를 설정하면 블록의 너비가 고정되고(예: 400px) float CSS 속성이 없으면 이 블록은 중심에 정렬됩니다. 그것이 위치한 요소. 실제로 중앙 정렬이 있는 비고무 레이아웃의 경우 이 정렬 방법이 일반적으로 사용됩니다. IE 5.5 및 이전 버전은 auto 값을 지원하지 않지만 여전히 항상 사용하는 것을 막지는 않습니다=).

다른 브라우저에서는 효과를 예측할 수 없으므로 테이블에 패딩 및 여백을 사용하지 않는 것이 좋습니다.

그리고 마지막으로 하고 싶은 말. margin: 10px 0 5px 20px;와 같은 축약형 포스트 구문을 사용하는 것을 잊지 마십시오. 들여쓰기가 0이면 매개변수를 지정하지 않고 간단히 0을 넣을 수 있습니다. 매개변수 중 어느 것이 어느 경계에 속하는지 기억하는 것은 매우 쉽습니다. 블록의 경우 들여쓰기가 시계 방향으로 이동합니다. 첫 번째 숫자는 상단에, 두 번째 숫자는 오른쪽, 세 번째 숫자는 하단, 네 번째 숫자는 하단에 있습니다. 왼쪽.

그게 사실 제가 오늘 여러분에게 말하고 싶은 전부였습니다. 모두 즐거운 주말 되세요!

이 속성은 1~4개의 값을 가질 수 있습니다.

이미지에서 밝은 회색은 패딩 속성이 담당하는 영역을 나타냅니다.

1. 지정할 때 네 가지 가치(5px 10px 15px 20px ) - 패딩 순서는 다음과 같습니다. 맨 위(5px) - 오른쪽(10픽셀) - 맨 아래(15px) - 왼쪽(20픽셀). 하나의 선언에서 들여쓰기 순서를 기억하기 위해 영어 단어를 사용할 수 있습니다. TR오 BL e(어디서 티-맨 위, 아르 자형-오른쪽, 비- 맨 아래, 엘- 왼쪽).


2. 지정할 때 세 가지 의미(5px 10px 15px ) - 패딩 순서는 다음과 같습니다. 맨 위(5px) - 오른쪽 왼쪽(10픽셀) - 맨 아래(15픽셀).


3. 지정할 때 두 가지 값(5px 10px ) - 첫 번째 값(5px)은 요소 콘텐츠의 위쪽과 아래쪽에서 패딩 크기를 설정하고, 두 번째(10px) 값은 요소 콘텐츠의 왼쪽과 오른쪽으로 패딩을 설정합니다.


4. 지정할 때 하나의 가치(5px) - 모든 면의 패딩은 동일한 크기(5px)가 됩니다.

브라우저 지원

CSS 구문:

자바스크립트 구문:

object.style.padding = "5px"

속성 값

CSS 버전

상속

생기 있는

사용 예

지금 바로 말씀드리겠습니다. 이것은 매우 중요한 교훈입니다. 공부한 후에는 페이지에 요소를 정렬하고 요소 사이에 들여쓰기를 설정하고 별도의 특정 블록 안에 요소를 만들고 여백을 설정할 수 있습니다.

심

Padding은 테두리의 안쪽 가장자리부터 내용까지 요소의 패딩 정도를 설정하는 속성입니다. 콘텐츠는 일반 텍스트, 이미지 또는 자체 여백을 가질 수 있는 자식 요소일 수 있습니다.

단위는 픽셀(px) 또는 백분율(%)일 수 있습니다.

#차단하다(
패딩: 12px /* 블록 경계에서 내용까지 패딩 - 모든 면에 12픽셀이 있음 */
}

특정 측면에만 필드를 지정할 수 있습니다.

패딩 탑- 상단에 여백을 만드는 속성입니다.
패딩 오른쪽- 오른쪽에 필드를 생성하는 속성.
패딩 바닥- 하단 여백을 만드는 속성입니다.
패딩 왼쪽- 왼쪽에 여백을 만드는 속성입니다.

#차단하다(
패딩 하단: 25px /* 하단 여백 25px */
패딩 왼쪽: 15px; /* 왼쪽 여백 15px */
}

눈치 챘겠지만, 이런 식으로 2면이나 3면에서 필드를 지정하면 긴 코드를 얻게 됩니다. 이를 위한 패딩 속성에 대한 약식 표기법이 있습니다. 4 개의 값이 모두 차례로 표시됩니다. 한 줄의 각 가장자리에서 위쪽에서 시작하여 시계 방향으로 이동합니다.

패딩: 상단 패딩 오른쪽 패딩 하단 패딩 왼쪽;

#차단하다(
패딩: 25px 10px 15px 6px; /* 위쪽 25px, 오른쪽 10px, 아래쪽 15px, 왼쪽 6px */
}

여유

여백 속성은 패딩과 달리 요소 경계 사이의 패딩 양을 설정합니다.
요소가 자식인 경우 패딩은 요소의 테두리에서 부모 테두리의 안쪽 가장자리까지의 공간입니다.
요소에 부모가 없는 경우 들여쓰기는 속성에 의해 주변 요소의 테두리 가장자리에 설정된 여유 공간으로 간주됩니다.

#차단하다(
여백: 4px
}

특정 면에만 들여쓰기를 지정하기 위해 다음 속성이 있습니다.

마진 탑- 위에서 들여쓰기를 만드는 속성입니다.
여백 오른쪽- 오른쪽에 들여쓰기를 만드는 속성입니다.
여백-하단- 아래에서 들여쓰기를 만드는 속성입니다.
여백-왼쪽- 왼쪽에 들여쓰기를 만드는 속성입니다.

padding 속성과 마찬가지로 margin도 값을 줄여서 사용할 수 있습니다. 다른 측면. 이동은 위쪽 여백에서 시계 방향으로 이동합니다.

여백: 위쪽 여백 오른쪽 여백 아래쪽 여백 왼쪽;

#차단하다(
여백: 15px 10px 5px 25px; /* 위쪽 15px, 오른쪽 10px, 아래쪽 5px, 왼쪽 25px */
}

관심을 가져주셔서 감사합니다!