CSS가 네거티브 패딩을 지원하지 않는 이유는 무엇입니까?

나는 네거티브 패딩의 전망이 특정 페이지 요소의 CSS 개발이 더 좋고 쉬워지는 데 도움이 될 수 있다는 것을 여러 번 보았다. 그러나 W3C CSS에는 네거티브 패딩에 대한 규정이 없습니다. 그 이유는 무엇입니까? 재산의 사용을 방해하는 장애물이 있습니까? 답변 해 주셔서 감사합니다.

업데이트

예를 들어, 예를 들어 세로 간격이 20px 인 글꼴을 사용하고 하이퍼 링크가 나타날 때 글꼴 하단에 점선 테두리를 적용하려는 경우입니다. 이 경우 파선 테두리가 지정된 단어 아래 20px 아래에 나타나기 때문에 스타일이 너무 초라하게 느껴질 것입니다. 음수 여백을 사용하면 여백이 테두리 외부 영역을 변경하므로 작동하지 않습니다. 네거티브 패딩은 이러한 상황에서 도움이 될 수 있습니다.

나는 최근 에 박스 모델이 왜 그런지 논의한 다른 질문 에 대답 했습니다.

박스 모델의 각 부분에는 특정한 이유가 있습니다. 패딩은 내용을 넘어 배경을 확장하는 것을 의미합니다. 컨테이너의 배경 을 축소 해야하는 경우 부모 컨테이너를 올바른 크기로 만들고 자식 요소에 약간의 여백을 제공해야합니다. 이 경우 콘텐츠가 패딩 되지 않고 오버플로됩니다.

정의에 따른 패딩은 양의 정수 (0 포함)입니다.

네거티브 패딩으로 인해 테두리가 콘텐츠로 축소됩니다 ( w3 의 box-model 페이지 참조).이 경우 콘텐츠 영역이 콘텐츠보다 작아 지므로 의미가 없습니다.

왜 negative padding유용하고 굉장한 지에 대한 아주 좋은 예를 설명하고 싶습니다 .

우리 모두 CSS 개발자가 알다시피, 동적 크기 조정 div를 다른 내부에 수직으로 정렬하는 것은 번거롭고 대부분 CSS만으로는 불가능한 것으로 간주됩니다. 의 통합은 negative padding이것을 바꿀 수 있습니다.

다음 HTML을 검토하십시오.

<div style="height:600px; width:100%;">
    <div class="vertical-align" style="width:100%;height:auto;" >
        This DIV's height will change based the width of the screen.
    </div>
</div>

다음 CSS를 사용하면 내부의 콘텐츠를 div외부 내부에 수직으로 가운데에 배치 할 수 있습니다 div.

.vertical-align {
    position: absolute;
    top:50%;
    padding-top:-50%;
    overflow: visible;
}

설명하겠습니다 ...

절대적으로 내부 div의 상단을 50 %에 배치하면 내부 div의 상단 가장자리가 외부 div의 중앙에 배치됩니다. 아주 간단합니다. 백분율 기반 위치 지정은 상위 요소의 내부 크기에 상대적 이기 때문 입니다.

반면에 백분율 기반 패딩 은 대상 요소의 내부 크기를 기반으로합니다 . 따라서의 속성을 적용하여 padding-top: -50%;내부 div의 콘텐츠를 내부 div 콘텐츠 높이의 50 % 거리만큼 위쪽으로 이동하여 내부 div 콘텐츠를 외부 div 내에서 중앙에 배치하고 여전히 높이 치수를 허용합니다. 내부 div가 동적입니다!

OP를 묻는다면 이것이 최선의 사용 사례가 될 것이며,이 해킹을 할 수 있도록 구현되어야한다고 생각합니다. 롤. 또는 기능을 수정하고 모든 요소에서 작동 vertical-align하는 버전을 제공 vertical-align해야합니다.

그건 그렇고, 이것은 도움이 될 수 있습니다.

상자 크기 조정 CSS 속성은 계산 너비와 요소의 높이에 사용되는 기본 CSS 박스 모델을 변경하는 데 사용됩니다.

http://www.w3.org/TR/css3-ui/#box-sizing
https://developer.mozilla.org/En/CSS/Box-sizing

당신은 그것을 속이는 방법이 아닌 이유를 물었습니다.

일반적으로 초기 구현의 프로그래머의 게으름으로 인해 이미 다른 기능에 더 많은 노력을 기울 였고, 당시 디자이너가 더 많이 요청했지만 시간이 걸리지 않았기 때문에 플로트와 같은 더 이상한 부작용을 제공했기 때문입니다. 이를 허용하기 위해 FOUR 속성을 사용하여 요소를 인접 요소에 대해 푸시 / 풀할 수 있습니다 (이제 푸시에는 4 개, 풀에는 2 개만 있음).

html이 디자인되었을 때 잡지는 이미지 주위에 리플 로우 된 텍스트를 좋아했지만, 오늘날 우리는 터치 트렌드가 있고 공간이 많고 읽을 것이없는 squary 물건을 좋아하기 때문에 싫어했습니다. 그렇기 때문에 센터링보다 플로트에 더 많은 압력을가 margin-top: fill;하거나 margin: average 0;단순히 콘텐츠를 하단에 정렬하거나 추가 공간을 분산하는 것과 같은 것을 디자인했을 수 있습니다 .

이 경우 CSS를 :parent의사 선택자가 없는 이유와 같은 이유로 구현되지 않았다고 생각합니다 . 반복 평가를 방지하기 위해.

엔지니어가 아니더라도 지금 CSS가 요소를 한 번 칠하도록 만들어 졌음을 알 수 있습니다. 나중에 칠할 요소에 대한 일부 속성을 기억하지만 이미 칠해진 요소로 돌아 가지 않습니다.

그래서 (내 생각에) 패딩은 너비에 대해 계산됩니다. 왜냐하면 그것이 페인트를 시작할 때 사용 가능한 값이기 때문입니다.

패딩 값이 음수이면 여백이 이미 설정되었을 때 이미 정의 된 외부 한계에 영향을 미칩니다. 아직 아무것도 칠하지 않았지만 90 년대의 기술을 가진 천재들이 만든 페인팅 과정을 읽으면 멍청한 질문을하고 그냥 "고마워"라고 말하는 것 같은 느낌이 듭니다.

웹 페이지의 요구 사항 중 하나는 시간이 걸리고 컴퓨터 리소스를 소모하여 모든 것을 표시하기 전에 올바르게 얻을 수있는 앱과 달리 빠르게 사용할 수 있다는 것입니다. 웹 페이지는 리소스를 거의 사용하지 않아도됩니다 (따라서 모든 장치에 적합). 가능) 바람에 스크롤됩니다.

InDesign과 같이 복잡한 리플 로우 및 위치 지정이있는 응용 프로그램을 보면 그렇게 빠르게 스크롤 할 수 없습니다! 다음 페이지로 이동하려면 프로세서와 그래픽 카드 모두에서 큰 노력이 필요합니다!

따라서 앞으로 그림을 그리고 계산하고 한 번 그려진 요소를 잊어 버리는 것은 지금은 필수 인 것 같습니다.

컨테이너 내부에 Iframe을 장착하면 컨테이너의 크기와 일치하지 않습니다. 약 20px의 패딩을 추가합니다. 현재이 문제를 쉽게 해결할 수있는 방법은 없습니다. 자바 스크립트 ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ ) 가 필요합니다.

마이너스 마진은 쉬운 해결책이 될 것입니다.

CSS 디자이너는 이것이 가져올 유연성을 상상할 수있는 예지력이 없었기 때문입니다. 인접한 요소와의 관계에 영향을주지 않고 상자의 내용 영역을 확장해야하는 이유는 많습니다. 불가능하다고 생각되면 nowrap상자에 긴 텍스트를 넣고 상자에 너비를 설정 한 다음 넘친 콘텐츠가 레이아웃에 어떤 영향을주지 않는지 확인하십시오 .

예, 이것은 2019 년의 CSS3와 여전히 관련이 있습니다. 적절한 사례 : 플렉스 박스 레이아웃. Flexbox 항목의 여백은 축소되지 않으므로 간격을 균등하게 유지 하고 컨테이너의 시각적 가장자리에 맞추려면 컨테이너의 패딩에서 항목의 여백을 빼야합니다. 결과가 0보다 작 으면 컨테이너에 음수 여백을 사용하거나 기존 여백에 음수를 합산해야합니다. 즉 요소 의 내용 은 여백을 정의하는 방식에 영향을 미칩니다. 플렉스 요소의 내용에 여백이 다른 단위로 정의되어 있거나 다른 글꼴 크기 등의 영향을받는 경우 합계가 제대로 작동하지 않습니다.

아래의 예는 이상적으로는 정렬되고 균일 한 간격의 회색 상자가 있어야하지만 슬프게도 그렇지 않습니다.

body {
  font-family: sans-serif;
  margin: 2rem;
}
body > * {
  margin: 2rem 0 0;
}
body > :first-child {
  margin-top: 0;
}
h1,
li,
p {
  padding: 10px;
  background: lightgray;
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;/* just to reset */
  padding: -5px;/* would allow correct alignment */
}
li {
  flex: 1 1 auto;
  margin: 5px;
}

<h1>Cras facilisis orci ligula</h1>

<ul>
  <li>a lacinia purus porttitor eget</li>
  <li>donec ut nunc lorem</li>
  <li>duis in est dictum</li>
  <li>tempor metus non</li>
  <li>dapibus sapien</li>
  <li>phasellus bibendum tincidunt</li>
  <li>quam vitae accumsan</li>
  <li>ut interdum eget nisl in eleifend</li>
  <li>maecenas sodales interdum quam sed accumsan</li>
</ul>

<p>Fusce convallis, arcu vel elementum pulvinar, diam arcu tempus dolor, nec venenatis sapien diam non dui. Nulla mollis velit dapibus magna pellentesque, at tempor sapien blandit. Sed consectetur nec orci ac lobortis.</p>

<p>Integer nibh purus, convallis eget tincidunt id, eleifend id lectus. Vivamus tristique orci finibus, feugiat eros id, semper augue.</p>

나는 몇 년 동안 약간의 네거티브 패딩이 먼 길을 갔을 때 이러한 작은 문제를 충분히 겪었지만 대신 calc()단위가 동일 할 때만 작동하는 의미없는 마크 업, 사용 또는 CSS 전처리기를 추가해야합니다. 등