부모 패딩 무시

127

부모 패딩을 무시하도록 수평 규칙을 얻으려고합니다.

다음은 내가 가지고있는 간단한 예입니다.

#parent {
  padding:10px;
  width:100px;
}
hr {
  width:100px;
}

수평선이 부모에서 10px만큼 확장된다는 것을 알 수 있습니다. 나는 부모 div의 다른 모든 것이 필요한 패딩을 무시하도록 노력하고 있습니다.

다른 모든 것에 대해 별도의 div를 만들 수 있다는 것을 알고 있습니다. 이것은 내가 찾고있는 해결책이 아닙니다.

html css

— 샘
소스

160

손쉬운 수정

margin:-10px

시간에.

— 샘
소스

9

이것은 작동하지만 문제는 부모 div의 전체 길이를 확장하지 않는다는 것입니다. 이것은 패딩이 100px 너비에 포함되지 않았기 때문입니다. 이것은 실제로 너비가 120px이고 <hr>div 끝에서 20px가됨을 의미합니다. 내가 의미하는 바는이 jsFiddle을 참조하십시오. jsfiddle.net/YVrWy/1

— Alastair Pitts

네, 제가 그것을 추가했을 때 그것을 해결했습니다. 너비는 무관합니다.

— Sam

22

100 % 너비가 필요한 경우 너비 속성으로 auto를 사용하십시오. 너비는 주어진 여백을 기준으로 계산됩니다.

— schlingel 2013 년

4

다음과 같이해야합니다 ... margin : 0 -15px; ..... 그렇지 않으면 시간이 인접한 콘텐츠를 수직으로 빨아들입니다.

— honkskillet 2015 년

좀 끔찍하네요. 하고자하는 더 좋은 방법이 있었다

— 올드 보이

29

이미지 목적을 위해 다음과 같이 할 수 있습니다.

img {
    width: calc(100% + 20px); // twice the value of the parent's padding
    margin-left: -10px; // -1 * parent's padding
}

— adriancho5692
소스

8

그러나 부모의 패딩을 반드시 알지 못한다면 어떨까요?

1

이것은 너비 대신 최소 너비를 사용할 때 저에게 효과적이었습니다.

— Pedro Nadolny dec

@ user5707327 당신은 항상 부모의 패딩 얻기 위해 자바 스크립트와 스타일을 결합 할 수 있습니다

— adriancho5692

와우, 네거티브 너비의 천재적인 사용!

— Mr PizzaGuy

9

대체로이 질문에 대한 답변은 많았지 만 모든 사람에 의해 작은 부분으로 이루어졌습니다. 이 문제는 불과 1 분 전에 다루었습니다.

패널의 아래쪽에 30px의 패널이있는 버튼 트레이를 갖고 싶었습니다. 버튼 트레이는 바닥과 측면이 같은 높이 여야했습니다.

.panel
{
  padding: 30px;
}

.panel > .actions
{
  margin: -30px;
  margin-top: 30px;
  padding: 30px;
  width: auto;
}

나는 아이디어를 추진하기 위해 더 많은 육체로 데모 를 수행 했습니다. 그러나 위의 핵심 요소는 자식의 음수 여백과 일치하는 부모 패딩을 오프셋합니다. 그런 다음 자식을 전체 너비로 실행하려면 너비를 자동으로 설정하는 것이 가장 중요합니다. (위의 schlingel 주석에서 언급했듯이 ).

— 미첼 기어
소스

7

조금 늦었지만 약간의 수학이 필요합니다.

.content {
  margin-top: 50px;
  background: #777;
  padding: 30px;
  padding-bottom: 0;
  font-size: 11px;
  border: 1px dotted #222;
}

.bottom-content {
  background: #999;
  width: 100%; /* you need this for it to work */
  margin-left: -30px; /* will touch very left side */
  padding-right: 60px; /* will touch very right side */
}

<div class='content'>

  <p>A paragraph</p>
  <p>Another paragraph.</p>
  <p>No more content</p>


  <div class='bottom-content'>
      I want this div to ignore padding.
  </div>

나는 Windows가 없으므로 IE에서 이것을 테스트하지 않았습니다.

fiddle : fiddle 예 ..

— sqram
소스

1

padding-right : 60px를 padding-left : 30px; padding-right : 30px로 분할하여 text-align : center;를 사용할 때 내용이 오프셋되지 않도록해야합니다.

— 루크

3

margin: 0 -10px;

~보다 낫다

margin: -10px;

나중에 콘텐츠를 수직으로 빨아들입니다.

— 홍크 스킬 렛
소스

2

부모의 너비는 120px입니다. 즉, 각면에 100 너비 + 20 패딩이므로 선 너비를 120px로 만들어야합니다. 여기에 코드가 있습니다. 다음 번에는 패딩이 요소 너비에 추가된다는 점에 유의하십시오.

#parent
{
    width: 100px;
    padding: 10px;
    background-color: Red;
}

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}

— Easwee
소스

1

정의 된 너비로 쉽습니다. 문제는 폭을 모를 때입니다

— Guilherme 페레이라

@GuilhermeFerreira 사용 width: auto;에서 hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 안타깝게도이 솔루션에는 여전히 padding부모가 설정 한 정보 가 필요합니다 .

— ToolmakerSteve

1

사용중인 박스 모델에 문제가있을 수 있습니다. IE를 사용하고 있습니까?

IE가 쿼크 모드 일 width때 상자의 바깥 쪽 너비는 안쪽에 패딩이 있음을 의미합니다. 따라서 상자 내부에 남은 총 영역은 100px - 2 * 10px = 80px100px 너비 <hr>가 올바르게 보이지 않습니다.

표준 모드에 width있는 경우은 상자의 내부 너비이고 패딩은 외부에 추가됩니다. 상자의 전체 폭이다 그래서 100px + 2 * 10px = 120px당신을 위해 정확히 100 픽셀 상자 안에 떠나 <hr>.

이를 해결하려면 IE의 CSS 값을 조정하십시오. (Firefox에서 괜찮아 보이는지 확인하십시오). 또는 더 좋은 방법은 문서 유형을 설정하여 브라우저를 엄격 모드로 설정하는 것입니다. IE도 표준 상자 모델을 따릅니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 ...

http://www.quirksmode.org/css/quirksmode.html

— Martin Algesten
소스

1

수직 패딩이있는 상위 컨테이너가 있고 해당 컨테이너 내부에 무언가 (예 : 이미지)가 수직 패딩을 무시하도록하려면 '상단'과 '하단'에 대해 음수이지만 동일한 여백을 설정할 수 있습니다.

margin-top: -100px;
margin-bottom: -100px;

실제 가치는 그다지 중요하지 않은 것 같습니다. 수평 패딩에는 이것을 시도하지 않았습니다.

— Marnix.hoh
소스

0

쉬운 수정 .. 부모 div에 추가 :

상자 크기 : 테두리 상자;

— 재클린 U
소스

0

여기에 다른 방법이 있습니다.

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>

다음은 repl.it에 대한 몇 가지 예입니다. https://repl.it/@bryku/LightgrayBleakIntercept

— 딜런 버넷
소스