CODEWITHSUNDEEP
htmlcss
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

How to ignore a parent element's padding

Is there a way to show full border class="line" to ignore/exclude the padding without modifying the html?

For example:

<div class="padding">
 <section>
     <p>text</p>
  </section>

  <div class="line"> </div>

   <section>
     <p>text</p>
  </section>
</div>

CSS:

.padding {
  padding: 20px;
  border: 1px solid black;
}

.line {
  border-top: 1px solid black;
}

Demo: https://jsfiddle.net/tzq3o6tx/

I want the <div class="line"> </div> border to overlap the padding.

Upvotes: 0

Views: 1660

Answers (2)

cronoklee
cronoklee

Reputation: 6702

Simply add a negative margin on .line like so:

.line {
    border-top: 1px solid black;
    margin:0 -20px;
}

https://jsfiddle.net/tzq3o6tx/3/

Upvotes: 5

Keith
Keith

Reputation: 4147

You just have to set the width to be more than the padding and then set a starting point that is before the padding.

https://jsfiddle.net/tzq3o6tx/1/

.padding {
  padding: 20px;
  border: 1px solid black;
  width:200px;
}

.line {
  border-top: 1px solid black;
  width: 240px;
  margin-left: -20px;
}

Upvotes: 1

Related Questions