태그 보관물: padding

padding

패딩을 무시하는 절대 위치 지정 어떻게 부모의 패딩을 존중하게합니까? 내부

절대 위치 요소를 어떻게 부모의 패딩을 존중하게합니까? 내부 div가 부모의 너비를 가로 질러 늘어나고 기본적으로 바닥 글 인 부모의 아래쪽에 배치되기를 원합니다. 그러나 아이는 부모의 패딩을 존중해야하며 그렇게하지 않습니다. 아이가 부모의 가장자리에 닿아 있습니다.

그래서 나는 이것을 원한다.

그러나 나는 이것을 얻고있다 :

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

내부 div 주위에 여백이 생길 수 있지만 추가하지 않아도됩니다.

답변

먼저 왜 이런 일이 일어나는지 봅시다 .

놀랍게도, 상자 position: absolute에 포함 상자가있는 경우 부모의 패딩 상자 (즉, 패딩 주위의 상자)이기 때문입니다. 일반적으로 (정적 또는 상대 위치 지정을 사용할 때) 포함 상자가 부모의 내용 상자 이기 때문에 놀라운 일 입니다.

CSS 사양 의 관련 부분은 다음과 같습니다 .

조상이 인라인 요소 인 경우 포함 블록은 해당 요소에 대해 생성 된 첫 번째 및 마지막 인라인 상자의 패딩 상자 주위의 경계 상자입니다 …. 그렇지 않으면 포함 블록은 조상.

Winter의 답변에서 제안한 것처럼 가장 간단한 방법 padding: inherit은 절대 위치에 사용 하는 것 div입니다. 그러나 절대 위치 div에 추가 패딩을 원하지 않는 경우에만 작동합니다 . 가장 일반적인 용도의 솔루션 (두 요소 모두 자체 패딩을 가질 수 있음)은 다음과 같습니다.

  1. div절대적으로 배치 된 주위에 상대적으로 배치 된 (패딩없이) 여분을 추가합니다 div. 그 새로운 div것은 부모의 패딩을 존중하고 절대 위치 div는 그것을 채 웁니다.

    물론 단점은 단순히 프레젠테이션 목적으로 HTML을 엉망으로 만든다는 것입니다.

  2. 절대적으로 배치 된 요소에서 패딩을 반복하거나 추가하십시오.

    여기서 단점은 CSS에서 값을 반복해야한다는 것입니다. CSS를 직접 작성하는 경우에는 취약합니다. 그러나이 같은 전처리 도구를 사용하는 경우 SASS또는 LESS당신은 변수를 사용하여 해당 문제를 방지 할 수 있습니다. 이것이 개인적으로 사용하는 방법입니다.

답변

시도 할 수있는 한 가지는 다음 CSS를 사용하는 것입니다.

.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}

그것은 자식 요소가 부모로부터 패딩을 상속하도록 허용하고 자식은 부모와 패딩에 일치하도록 위치시킬 수 있습니다.

또한 box-sizing: border-box;관련 요소에 사용하고 있습니다.

모든 브라우저에서 이것을 테스트하지는 않았지만 Chrome, Firefox 및 IE10에서 작동하는 것 같습니다.

답변

글쎄, 이것은 (의미 적으로) 가장 우아한 해결책은 아니지만 어떤 경우에는 단점없이 작동합니다. 패딩 대신 부모 요소에 투명한 테두리를 사용하십시오. 절대 위치의 자식 요소는 테두리를 따르며 스타일에 부모 요소의 테두리를 사용하는 것을 제외하고는 정확히 동일하게 렌더링됩니다.

답변

부모 div에서 패딩 대신 여백을 사용하십시오. http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html

답변

여기에 최선의 기회가 있습니다. 다른 Div를 추가하고 빨간색으로 만들었고 테스트하기 위해 부모님의 키를 200px로 변경했습니다. 아이는 이제 손자가되고 부모는 조부모가됩니다. 따라서 부모는 부모를 존중합니다. 내 아이디어를 얻길 바랍니다.

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
     <div style="background-color: red;  position: relative; height: 100%;">
        <div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
     </div>
    </div>
  </body>
</html>

편집하다:

나는 당신이하려는 일을 할 수 없다고 생각합니다. 절대 위치는 당신이 명예해야 할 좌표를 줄 것임을 의미합니다. 부모가 5px의 패딩을 가지고 있다면 어떨까요? 그리고 당신은 절대적으로 아이를 맨 위에 놓습니다 : -5px; 왼쪽 : -5px . 부모와 당신을 동시에 공경하는 것이 어떻습니까?

내 솔루션

부모를 존중하기를 원한다면 절대로 위치를 지정하지 마십시오.

답변

1.) 부모에게 큰 테두리를 사용할 수 없습니다-특정 테두리를 원할 경우

2.) 여백을 추가 할 수 없습니다-부모가 다른 컨테이너의 일부이고 부모가 전체를 차지하기를 원하는 경우 그 웅대 한 부모의 폭.

적용 할 수있는 유일한 해결 방법은 자녀를 다른 용기에 싸서 부모가 조부모가 된 다음 새 자녀의 래퍼 / 부모에게 패딩을 적용하는 것입니다. 또는 어린이에게 직접 패딩을 적용 할 수 있습니다.

귀하의 경우 :

.css-sux{
  padding: 0px 10px 10px 10px;
}

답변

추가 레벨의 Div를 사용하여 쉽게 수행 할 수 있습니다.

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

데모 : https://jsfiddle.net/soxv3vr0/