li CSS 패딩. HTML 요소에서 들여쓰기를 제거하는 방법. HTML 페이지 가장자리의 여백을 제거하는 방법
이 기사에서는 올바른 배치 방법을 알려 드리고자합니다. 필드(패딩) 및 들여 쓰기(여백) CSS에서.
먼저 W3C 사양에 따른 여백과 패딩의 정의를 기억해 봅시다. 상자 모델에서 여백은 내용과 상자 테두리 사이의 거리입니다. 패딩은 블록의 테두리와 인접한 요소 또는 상위 요소의 테두리 사이의 거리입니다.
따라서 요소의 테두리와 배경을 지정하지 않으면 차이가 없으므로 padding이나 margin 속성을 이용하여 들여쓰기를 설정하되, 요소의 너비(width)와 높이(height)를 지정하지 않은 경우에 한함 상자 크기 속성을 사용하여 콘텐츠 크기를 계산하는 알고리즘.
어떤 경우든 요소의 너비나 높이에 여백이 포함될 수도 있고 포함되지 않을 수도 있다는 점을 기억하세요. 들여쓰기는 항상 요소 외부에 설정됩니다.
이제 요소 사이에 여백과 공간을 올바르게 배치하는 방법을 살펴보겠습니다. 다음 블록을 예로 들어보겠습니다.
이것은 뉴스 블록입니다. 헤더, 뉴스 목록, "기타 뉴스" 링크로 구성됩니다. news__title, news__list 및 news__more-link라는 클래스 이름을 지정해 보겠습니다.
소식
기타 뉴스
이러한 요소 각각에는 왼쪽 및 오른쪽 패딩이 동일하므로 각 요소마다 왼쪽 및 오른쪽 패딩을 개별적으로 설정하는 것보다 상위 블록에 여백을 설정하는 것이 좋습니다.
뉴스(패딩: 20px 25px; )
따라서 오른쪽과 왼쪽 필드의 값을 변경해야 하는 경우 이 작업을 수행해야 합니다. 한 곳에서. 그리고 뉴스 블록 내부에 새 요소를 추가할 때 이미 왼쪽과 오른쪽에 필요한 들여쓰기가 있을 것입니다.
예를 들어 배경으로 인해 패딩이 전혀 없어야 하는 요소를 제외하고 블록 내의 모든 요소는 왼쪽과 오른쪽에 동일한 패딩이 있는 경우가 종종 있습니다. 이 경우 요소에 음수 패딩을 설정할 수 있습니다. 그러면 다른 요소에 대해 블록 내부의 필드를 제거할 필요가 없습니다.
이제 요소 사이의 수직 여백을 설정해야 합니다. 이렇게 하려면 요소 중 어떤 요소가 해당되는지 결정해야 합니다. 의무적 인. 분명히 뉴스 목록 없이는 뉴스 블록이 존재할 수 없으며, 예를 들어 디자인이 변경되면 제목도 제거될 수 있습니다.
이를 고려하여 제목 하단에 들여쓰기를 설정하고 "기타 뉴스" 링크 상단에 들여쓰기를 설정했습니다.
News__title ( margin-bottom: 10px; ) .news__more-link ( margin-top: 12px; )
뉴스 목록의 상단과 하단에 패딩을 추가하여 동일한 외부 결과를 얻을 수 있습니다.
News__list ( 여백: 10px 0 12px 0; )
이제 개별 뉴스 항목 사이에 들여쓰기를 설정해야 합니다. 다시 한 번 말씀드리지만, 뉴스 항목의 수는 다양할 수 있으며 하나의 뉴스 항목만 나열될 수도 있습니다.
첫 번째 뉴스를 제외한 각 뉴스에 대해 위쪽 들여쓰기를 설정하거나 마지막 뉴스를 제외한 각 뉴스에 대해 아래쪽 들여쓰기를 설정할 수 있습니다. CSS 3.0 사양에만 추가된:last-child 의사 선택기와 달리:first-child 의사 선택기는 CSS 2.1 사양에 추가되었으며 지원 범위가 더 넓기 때문에 첫 번째 옵션이 더 좋습니다.
News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0; )
따라서 여백과 들여쓰기를 올바르게 배치하면 스타일을 변경하거나 디자인을 방해하지 않고 블록의 모양을 유연하게 변경할 수 있습니다. 가장 중요한 것은 어떤 블록 요소가 주요 요소인지 결정하는 것입니다( 필수적인), 그리고 어떤 것 선택 과목.
때때로 우리는 필수 요소에 의존할 수 없습니다. 예를 들어, 일부 제목과 텍스트를 표시할 수 있는 팝업 창이 있습니다. 게다가 어떤 경우에는 텍스트가 없을 수도 있고, 어떤 경우에는 제목이 없을 수도 있습니다. 즉, 두 요소 모두 선택 사항입니다.
이 경우 들여쓰기 설정을 위해 다음과 같은 방법을 사용할 수 있습니다.
Popup__header + .popup__text ( 여백 상단: 15px; )
그러면 두 요소가 모두 사용되는 경우에만 들여쓰기가 나타납니다. 제목만 표시하거나 텍스트만 표시하는 경우에는 추가 들여쓰기가 적용되지 않습니다.
수직 여백 축소
모든 사람이 알지 못하는 또 다른 뉘앙스는 인접한 블록 사이의 수직 공간과 관련이 있습니다. 위에서 제시한 들여쓰기의 정의에 따르면 들여쓰기는 사이의 거리라고 합니다. 국경현재 블록과 이웃 블록. 따라서 두 개의 블록을 서로 아래에 배치하고 그 중 하나에 아래쪽 여백을 30px, 다른 하나에 20px의 위쪽 여백을 지정하면 그 사이의 여백은 50px가 아니라 30px가 됩니다.
즉, 들여쓰기는 중복되며, 블록 간의 들여쓰기는 들여쓰기의 합이 아닌 가장 큰 들여쓰기와 같습니다. 이 효과를 "붕괴"라고도 합니다.
가로 들여쓰기는 세로 들여쓰기와 달리 '접어지지' 않고 합산된다는 점에 유의하세요. 필드(패딩)도 요약됩니다.
들여쓰기의 "축소"에 대해 알면 이 기능을 유리하게 사용할 수 있습니다. 예를 들어 기사 내부의 제목과 텍스트를 들여쓰기해야 하는 경우 첫 번째 수준 제목의 경우 아래쪽 들여쓰기를 20px로 설정하고 두 번째 수준 제목의 경우 위쪽 들여쓰기는 20px, 아래쪽은 10px로 설정합니다. 모든 단락에서 위쪽 들여쓰기를 10px로 설정했습니다.
H1 ( margin-bottom: 24px; ) h2 ( margin-top: 24px; margin-bottom: 12px; ) p ( margin-top: 12px; )
이제 h2 제목은 h1 제목 뒤나 단락 뒤에 배치될 수 있습니다. 어떤 경우에도 상단 여백은 24px를 초과하지 않습니다.
일반 규칙
정리하자면, 제가 여백과 들여쓰기를 할 때 준수하는 규칙을 나열하겠습니다.
- 인접한 요소의 패딩이 동일한 경우 해당 요소를 요소보다 상위 컨테이너에 설정하는 것이 좋습니다.
- 요소 사이에 들여쓰기를 설정할 때 해당 요소가 필수인지 선택인지 고려해야 합니다.
- 유사한 요소 목록의 경우 요소 수가 다를 수 있다는 점을 잊지 마세요.
- 수직 패딩에 주의하고 이 기능을 활용하면 도움이 됩니다.
태그: 태그 추가
일
글머리 기호 또는 번호 매기기 목록 주위의 패딩을 제거합니다.
해결책
예제 1에 표시된 것처럼 목록 유형에 따라 UL 또는 OL 선택기에 대해 null 값이 있는 여백 및 패딩 스타일 속성을 사용합니다.
예시 1: 목록 들여쓰기
HTML5 CSS 2.1 IE Cr Op Sa Fx
- 체브라시카
- 악어 제나
- 샤포크약
이 예의 결과는 그림 1에 나와 있습니다. 1.
쌀. 1. 세로, 가로 들여쓰기가 없는 목록
웹 페이지의 왼쪽 가장자리에 나타나는 목록 표시가 사라집니다. 목록을 왼쪽으로 이동하지 않고 위쪽 및 아래쪽 여백만 제거하려면 margin-top 및 margin-bottom 속성을 사용합니다(예제 2).
예시 2: 목록 들여쓰기
HTML5 CSS 2.1 IE Cr Op Sa Fx
- 체브라시카
- 악어 제나
- 샤포크약
인라인 블록(inline-block)은 많은 경우 매우 편리한 마크업 도구입니다. 사용 예는 기사에서 찾을 수 있습니다.
동시에 그들과 관련된 함정도 있습니다. 나는 심지어 전체 조약돌이라고 말하고 싶습니다. 그를 보고 싶나요? 여러 인라인 요소(또는 인라인 블록)를 한 행에 배치합니다.
다음 HTML이 있다고 가정해 보겠습니다.
- 스토키.
- 단지
- 윤곽
요소를 소문자로 만들기:
Li( 디스플레이:인라인; )
...또는 라인 블록:
Li( display:inline-block; /* IE6-7의 다음 두 줄 - 인라인 블록의 동작을 에뮬레이트합니다 */ //display:inline; Zoom:1; )
문제
대부분의 브라우저는 들여쓰기로 인라인 블록(요소)을 구분합니다. 이해하기 쉽도록 블록에 약간의 색상을 입혔습니다.
이런! 어떤 종류의 들여쓰기가 있나요? 나는 그런 것을 처방하지 않았습니다!
이하에서는 단순히 "인라인 블록"이라고 쓰고 "인라인 블록(:inline-block) 또는 그냥 인라인 요소(display:inline)"을 의미한다는 점에 동의합니다. 이는 완전히 공통된 문제가 있고 동일하게 처리되기 때문입니다. 방법.
우리는 누구를 치료하고 있습니까?
따라서 인라인 블록에는 이제 알 수 없는 들여쓰기가 생겼습니다. 물론 이것은 목록에만 적용되는 것은 아닙니다. 예를 들어 "ov"와 같이 연속적으로 위치한 그룹은 동일한 방식으로 작동합니다.
공평하게 말하면 IE6과 IE7은 들여쓰기 없이 전체 내용을 렌더링한다는 점에 유의해야 합니다.
이것이 모든 브라우저가 표시되는 방법입니다!
우리는 누가 옳고 누가 그른지에 대한 세부 사항을 다루지 않을 것이며 (읽기-비뚤어진 표준 지원) 단순히 브라우저 간 호환성을 달성할 것입니다. 동작을 예측할 수 있으면 매우 편리합니다. 들여쓰기를 설정하지 않았으므로 그릴 필요가 없습니다!
실제로 모든 것이 간단합니다. 들여쓰기를 제거하려면 들여쓰기가 어디서 왔는지 이해해야 합니다!
들여쓰기는 어디에서 오는가?
그리고 이해하는 것은 어렵지 않습니다. 한 줄에 태그를 작성하면 됩니다.
- 스토키.
- 단지
- 윤곽
기적! 들여쓰기가 저절로 사라졌습니다! 결론: 태그 사이의 보이지 않는 문자(하이픈 넣기 또는 공백)에 의해 생성됩니다.
물론 "모든 것을 한 줄에 쓰기"는 문제에 대한 크로스 브라우저 솔루션이지만 여기서는 명백한 이유(들여쓰기 없이 쓰는 사람이 누구입니까?)로 인해 고려되지 않습니다. 우리는 다른 방법을 찾고 있습니다.
들여쓰기로 아래로!
들여쓰기는 컨테이너의 문자에 의해 생성되므로 이러한 문자를 "중화"하는 것이 현명한 아이디어입니다. 즉, :0으로 설정합니다. (가장 중요한 것은 이 속성이 상속된다는 사실을 잊지 않고 자손 자체를 위해 이를 중단하는 것입니다.)
Ul( 글꼴 크기:0; ) li( 글꼴 크기:14px; 디스플레이:인라인; )
완벽한 솔루션! 라인 블록은 실제로 서로 눌려 있습니다. 여전히 작은 외관상 문제가 있습니다. 일부 브라우저(예: Opera 9.5 및 이전 버전)에는 상위 항목의 상단이나 하단에 들여쓰기가 있습니다(그림의 상위 항목은 연한 회색 녹색으로 채워져 있음).
세로로 들어간 부분이 보이도록 사진을 확대했습니다
이 문제는 기사에 설명된 문제와 유사하며 거의 같은 방식으로 처리됩니다. add :0; (다시 말하지만, 자손과 겹치는 것을 잊지 마세요). 그래서 우리는 다음을 얻습니다:
Ul( 글꼴 크기:0; line-height:0; ) li( 글꼴 크기:14px; line-height:normal; /* 또는 다른 적합한 값 */ display:inline; )
이제 모든 것이 괜찮고 멋지나요? 별로!
예상치 못한 곳에서 문제가 발생했다
분명히, 이러한 들여쓰기는 실제로 거기에 있어야 합니다! 이를 뒷받침하는 두 가지 확고한 주장이 있습니다.
- IE6-7은 이를 그리지 않습니다.
- 우리의 노력에도 불구하고 Webkit 브라우저는 여전히 이를 그립니다.
예 예! 위의 모든 트릭을 거친 후 Safari와 Chrome 모두 패딩을 3픽셀에서 1픽셀로 간단히 줄였습니다!
완고한 웹킷은 포기하고 싶지 않습니다!
Nick의 2011년 7월 3일 업데이트. FF는 또 다른 숨겨진 놀라움을 선사했다. 페이지 크기를 조정하면 상단에 1px 패딩이 추가로 생기는 경우가 있습니다. 이 문제는 표시 규칙을 추가하여 해결할 수 있습니다: -moz-inline-stack;
최종 결정
:-1px를 사용하여 웹킷을 극복하는 것이 가능했습니다. 그러나 유해한 부작용은 발견되지 않았습니다(물론 하위 항목의 속성을 재정의하는 것을 잊지 않는 한).
인라인 요소에 대한 크로스 브라우저 솔루션을 갖춘 최종 CSS:
Ul( 글꼴 크기:0; /* 가로 간격 제거 */ line-height:0; /* ...일부 브라우저에서는 세로 간격 */ letter-spacing:-1px; /* 웹킷 설득 */ ) li ( 글꼴 -size:14px; /* 일반 값을 복원하는 것을 잊지 마세요. */ line-height:normal;
인라인 블록의 경우:
Ul(font-size:0; /* 가로 간격 제거 */ line-height:0; /* ...일부 브라우저에서는 세로 간격 */ letter-spacing:-1px; /* 웹킷 설득 */ ) li ( 글꼴 -size:14px; /* 일반 값을 복원하는 것을 잊지 마세요. line-height:normal; letter-spacing:normal; display: -moz-inline-stack!important; 표시:인라인 ; 확대/축소:1;
확대/축소 속성이 유효하지 않다는 것을 잊지 마십시오. 따라서 전투 상황에서는 별도의 CSS에 넣고 .
링크 목록이 있는 블록을 생성할 때 일반적으로 블록 또는 인라인 블록 속성과 함께 표시 속성을 사용하는 것이 좋습니다. 그러면 활성 링크 필드의 크기가 늘어납니다. 큰 활성 링크 필드는 요소의 유용성을 향상시키며, 큰 요소는 마우스로 탐색하기가 더 쉽습니다.
display: block이 있는 요소는 블록 요소로 렌더링됩니다.
display: inline-block이 있는 요소는 마치 인라인인 것처럼 다른 요소를 둘러싸는 블록 요소로 렌더링됩니다. 콘텐츠의 형식은 블록 요소로 지정되고 요소 자체의 형식은 인라인으로 지정됩니다.
링크 목록이 포함된 간단한 예를 살펴보겠습니다.
링크 스타일을 변경하지 않으면 활성 필드의 크기는 링크 내부의 텍스트 크기와 일치합니다.
활성 필드 크기를 상위 요소의 너비로 만들어 이를 개선할 수 있습니다.
Ul a (디스플레이: 블록; ) 
우리는 더 잘할 수 있습니다.
- 링크와 달리 목록 항목에 필드가 없는지 확인하세요.
- 여백은 요소의 활성 영역이 아니기 때문에 링크에는 여백이 없습니다.
이 기사는 분명한 내용으로 구성되어 있지만 확대된 활성 필드로 인해 "변형"되지 않은 인터넷 링크 블록을 자주 찾을 수 있습니다.
원본 기사: 링크 목록에서 여백 유지 작성자: Chris Coyier, 2010년 11월 29일
