상위 패딩 무시
저는 부모 패딩을 무시하도록 제 수평적인 규칙을 얻으려고 노력하고 있습니다.
다음은 간단한 예입니다.
#parent {
padding:10px;
width:100px;
}
hr {
width:100px;
}
수평 규칙이 상위 규칙에서 10px만큼 확장된다는 것을 발견할 수 있습니다.저는 부모님의 div에 있는 다른 모든 것들이 필요로 하는 패딩을 무시하도록 하려고 노력하고 있습니다.
저는 제가 다른 모든 것에 대해 별도의 디바를 만들 수 있다는 것을 알고 있습니다. 이것은 제가 찾고 있는 해결책이 아닙니다.
쉬운 해결책, 그냥 하라.
margin:-10px
인사부에
이미지 목적으로 다음과 같은 작업을 수행할 수 있습니다.
img {
width: calc(100% + 20px); /* twice the value of the parent's padding*/
margin-left: -10px; /* -1 * parent's padding*/
}
이 질문은 대체로 모두가 답했지만 부분적으로는 모두가 답했습니다.제가 조금 전에 처리했습니다.
저는 패널 하단에 버튼 트레이가 있고 패널 주위에 30px가 있습니다.버튼 트레이는 바닥과 측면이 평평해야 합니다.
.panel
{
padding: 30px;
}
.panel > .actions
{
margin: -30px;
margin-top: 30px;
padding: 30px;
width: auto;
}
저는 이 아이디어를 추진하기 위해 좀 더 구체적으로 여기서 데모를 했습니다.그러나 위의 주요 요소는 자식에 대한 음의 여백이 일치하는 부모 패딩을 상쇄합니다.그런 다음 자녀를 전체 너비로 실행하려면 가장 중요하며 너비를 자동으로 설정합니다.(위의 슐링겔 논평에서 언급한 바와 같이).
다른 솔루션:
position: absolute;
top: 0;
left: 0;
위/오른쪽/아래/왼쪽을 당신의 경우로 변경하세요.
좀 늦었습니다.하지만 약간의 수학이 필요합니다.
.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 예제..
수직 패딩이 있는 상위 컨테이너가 있고 해당 컨테이너 내부의 어떤 것(예: 이미지)이 수직 패딩을 무시하도록 하려면 '위쪽'과 '아래쪽' 모두에 대해 음의 마진을 설정할 수 있습니다.
margin-top: -100px;
margin-bottom: -100px;
실제 값은 크게 문제가 되지 않는 것 같습니다.가로 패드는 안 해봤어요.
margin: 0 -10px;
보다 낫습니다
margin: -10px;
후자는 콘텐츠를 수직으로 빨아들입니다.
여기 다른 방법이 있습니다.
<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
부모님의 너비는 120px입니다. 즉, 너비가 100 + 양쪽에 20px이므로 선을 120px 너비로 만들어야 합니다.여기 코드가 있습니다.다음 번에는 패딩이 요소 너비까지 추가된다는 점에 유의합니다.
#parent
{
width: 100px;
padding: 10px;
background-color: Red;
}
hr
{
width: 120px;
margin:0 -10px;
position:relative;
}
화면 왼쪽에서 오른쪽으로 hr이 직진할 때 사용하는 코드는 보기 너비에 영향을 미치지 않도록 하는 데 사용할 수 있습니다.
hr {
position: absolute;
left: 0;
right: 0;
}
문제는 당신이 사용하는 박스 모델로 귀결될 수 있습니다.IE를 사용하고 있습니까?
모드일 때, IE는 quirks 모드이고,width상자의 바깥쪽 너비입니다. 즉, 패딩이 안쪽에 있습니다.총은 그서박스안남에총면는은적아있래▁left▁so면은총▁area적▁is▁the▁inside▁total▁box.100px - 2 * 10px = 80px의 100인치 너비의 너비의 100인치 크기의 100인치입니다.<hr>올바르게 보이지 않을 것입니다.
만약당표모있다면드에준이신,,▁if▁mode면다.width상자의 안쪽 너비이며, 바깥쪽에 패딩이 추가됩니다.그래서 박스의 총 너비는100px + 2 * 10px = 120px상자 안에 정확히 100달러를 남겨두는 것은 당신을 위한 것입니다.<hr>.
이 문제를 해결하려면 IE에 대한 CSS 값을 조정하십시오. (파이어폭스에서 문제가 없는지 확인하십시오.)또는 문서 유형을 설정하여 브라우저를 엄격한 모드로 전환합니다. 여기서 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
부모의 패딩과 일치하는 마이너스 여백을 자식에 추가하면 됩니다.너비를 설정하거나 상자 크기를 변경하거나 절대 위치 지정을 사용할 필요가 없습니다.
#parent {
padding: 10px;
width: 100px;
}
hr {
margin-right: -10px;
margin-left: -10px;
// For modern browsers you can use margin-inline: -10px
}
너비를 설정할 필요가 없는 이유는 hr 요소가 블록 요소이기 때문입니다.너비는 기본적으로 "자동"으로 설정되며, 이는 너비가 확장되어 상위 항목(마이너스 패딩, 여백 및 테두리)을 채울 것임을 의미합니다.
쉬운 해결책..상위 div에 추가:
box-bound: 보더-
언급URL : https://stackoverflow.com/questions/4296530/ignore-parent-padding
'programing' 카테고리의 다른 글
| 여러 스크립트에서 Mariadb에 삽입 (0) | 2023.08.25 |
|---|---|
| ASP.NET 웹 API 애플리케이션이 IIS 7에 배포될 때 404를 제공함 (0) | 2023.08.25 |
| ASP.NET에서 JSON 요청을 탐지하는 가장 좋은 방법은 무엇입니까? (0) | 2023.08.25 |
| SQL Management Studio에서 SQL XML 열을 쉽게 편집하는 방법 (0) | 2023.08.25 |
| 링크뿐만 아니라 버튼에서 파이어폭스의 점선 아웃라인을 제거하는 방법은 무엇입니까? (0) | 2023.08.25 |