컨테이너의 여백과 여백을 덮어 씁니다.

Question

이 섹션을 컨테이너 div의 100 % 너비로 만들려는 페이지의 특정 지점이 있습니다. 아래 그림에서 볼 수 있듯이, 왼쪽의 공백은 패딩입니다. .article-wrapper-pro의 속성입니다. 기본적으로이 속성을 재정의하여 패딩이 필요 없습니까?

코드 :

<div class="article-wrapper-pro"> 
    <div class="row"> 
    <div class="small-12 medium-8 columns about-border"> 
     <article class="padd"> 
     <h3 class="about-intro">YADDA YADDDA YADDA</h3> 
     <p>YADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDA</p> 
     <p>YADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDA</p> 
     <h2>Take a look</h2> 
     <div class="about-images"> 
      <img src="img/oakview-screen.jpg" alt="e" </img> 
     </div> 
     </article> 
     <div class="work-with-us"> 
     <h2 class="about-serv">Work with us</h2> 
     <p>IYADDA YADDDA YADDAYADDA YADDDA YADDA</p> 
     </div> 
    </div> 
    <div class="medium-4 columns about-images show-for-medium-up project-side"> 
     <img class="project-logos" src="img/oakview-logo.jpg" alt="Oak View Logo" </img> 
     <div class="side-section"> 
     <h3 class="about-side-headings">Services</h3> 
     <div class="about-list-side"> 
      <ul> 
      <li>YADDA YADDDA YADDA</li> 
      <li>YADDA YADDDA YADDA</li> 
      <li>YADDA YADDDA YADDA</li> 
      </ul> 
     </div> 
     <h3 class="about-side-headings">YADDA YADDDA YADDA</h3> 
     <div class="about-list-side"> 
      <ul> 
      <li>YADDA YADDDA YADDA</li> 
      <li>YADDA YADDDA YADDA</li> 
      <li>YADDA YADDDA YADDA</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

를 사용하여 음의 여백. 다음과 같은 시나리오의

생각한다

HTML :

<div class="container"> 
    <div class="box-to-override"> 
    </div> 
</div> 

CSS :

.container { 
    width: 500px; 
    background: red; 
    padding-left: 40px; 
    padding-top: 100px; /* Only to demonstrate */ 
} 

.box-to-override { 
    margin-left: -40px; 
    background: #CCC; 
    min-height: 300px; /* Only to demonstrate */; 
} 

.box-to-override 클래스

margin-left는 사업부가 패딩 집합에 확장한다 .container.

여기에 FIDDLE