부모 패딩 무시
부모 패딩을 무시하도록 수평 규칙을 얻으려고합니다.
다음은 내가 가지고있는 간단한 예입니다.
#parent {
padding:10px;
width:100px;
}
hr {
width:100px;
}
수평선이 부모에서 10px만큼 확장 할 수 있습니다. 나는 부모 div의 다른 모든 것이 필요한 패딩을 무시하도록 노력하고 있습니다.
다른 모든 것에 대해 별도의 div를 만들 수 있습니다. 이것은 내가 찾고있는 해결책이 아닙니다.
쉬운 수정, 그냥하세요
margin:-10px
시간에.
이미지 목적으로 다음과 같이 할 수 있습니다.
img {
width: calc(100% + 20px); // twice the value of the parent's padding
margin-left: -10px; // -1 * parent's padding
}
대체로이 질문에 대한 답변이 모두가 작은 부분을 차지했습니다. 나는이 문제를 1 분 전에 다루었습니다.
패널의 패널 패널 전체가 30px 인 버튼 트레이를 갖고 싶었습니다. 버튼 트레이는 바닥과 바닥이 평평해야했습니다.
.panel
{
padding: 30px;
}
.panel > .actions
{
margin: -30px;
margin-top: 30px;
padding: 30px;
width: auto;
}
나는 아이디어를 추진하기 위해 더 많은 육체로 여기 에서 데모 를 제공 합니다. 그러나 위의 주요 요소는 마이너스의 음수 여백과 일치하는 부모 패딩을합니다. 그런 다음 작은 너비를 전체 너비로 실행 너비를 자동으로 설정하는 것이 가장 중요합니다. (위의 schlingel 주석 에서 언급했듯이 ).
조금 늦었지만 약간의 수학이 필요합니다.
.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 예 ..
너비의 너비는 120px입니다. 즉, 각면에 100 너비 + 20 패딩 선 너비를 120px로 전달합니다. 여기에 코드가 있습니다. 다음 번에는 패딩이 요소 너비에 추가 점에 유의하십시오.
#parent
{
width: 100px;
padding: 10px;
background-color: Red;
}
hr
{
width: 120px;
margin:0 -10px;
position:relative;
}
사용중인 박스 모델에 문제가있을 수 있습니다. 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
margin: 0 -10px;
~보다 낫다
margin: -10px;
나중에 콘텐츠를 수직으로 빨아들입니다.
참고 URL : https://stackoverflow.com/questions/4296530/ignore-parent-padding
'IT' 카테고리의 다른 글
| Scala의 "flatmap that s ***"관용적 표현은 어디에서 왔습니까? (0) | 2020.08.16 |
|---|---|
| Asp.Net MVC에서 "홈페이지"설정 (0) | 2020.08.16 |
| "기본"MIME 유형이 있습니까? (0) | 2020.08.16 |
| Session.Abandon ()과 Session.Clear ()의 차이점은 무엇입니까? (0) | 2020.08.16 |
| Docker 컨테이너에서 호스트 데이터베이스에 액세스 (0) | 2020.08.16 |