CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 7078

Ignore parent padding

I'm trying to get my horizontal rule to ignore the parent padding.

Here's a simple example of what I have:

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

You will find that the horizontal rule extends out of the parent by 10px. I'm trying to get it to ignore the padding that everything else in the parent div needs.

I'm aware that I could make a separate div for everything else; this is not the solution I'm looking for.

Upvotes: 205

Views: 288415

Answers (13)

adriancho5692
adriancho5692

Reputation: 791

For image purpose you can do something like this

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

Upvotes: 70

Bryan Sullivan
Bryan Sullivan

Reputation: 506

You just need to add negative margins to the child that match the padding of the parent. No need to set a width, change the box-sizing, or use absolute positioning.

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

hr {
  margin-right: -10px;
  margin-left: -10px;
  // For modern browsers you can use margin-inline: -10px
}

The reason you don't need to set a width is because the hr element is a block element. It's width defaults to "auto", which means it will expand to fill it's parent (minus padding, margin, and border).

Upvotes: 1

treyarder
treyarder

Reputation: 43

If your after a way for the hr to go straight from the left side of a screen to the right this is the code to use to ensure the view width isn't effected.

hr {
position: absolute;
left: 0;
right: 0;
}

Upvotes: 2

Gohchi
Gohchi

Reputation: 469

Another solution:

position: absolute;
top: 0;
left: 0;

just change the top/right/bottom/left to your case.

Upvotes: 13

Marnix.hoh
Marnix.hoh

Reputation: 1932

If you have a parent container with vertical padding and you want something (e.g. an image) inside that container to ignore its vertical padding you can set a negative, but equal, margin for both 'top' and 'bottom':

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

The actual value doesn't appear to matter much. Haven't tried this for horizontal paddings.

Upvotes: 6

Dillon Burnett
Dillon Burnett

Reputation: 503

Here is another way to do it.

<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>

Here are some examples on repl.it: https://repl.it/@bryku/LightgrayBleakIntercept

Upvotes: 4

Jaclyn U
Jaclyn U

Reputation: 753

easy fix.. add to parent div:

box-sizing: border-box;

Upvotes: -2

David Geere
David Geere

Reputation: 433

In large this question has been answered but in small parts by everyone. I dealt with this just a minute ago.

I wanted to have a button tray at the bottom of a panel where the panel has 30px all around. The button tray had to be flush bottom and sides. 

.panel
{
  padding: 30px;
}

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

I did a demo here with more flesh to drive the idea. However the key elements above are offset any parent padding with matching negative margins on the child. Then most critical if you want to run the child full-width then set width to auto. (as mentioned in a comment above by schlingel).

Upvotes: 17

honkskillet
honkskillet

Reputation: 3137

margin: 0 -10px;

is better than

margin: -10px;

The later sucks content vertically into it.

Upvotes: 5

sqram
sqram

Reputation: 7201

Kinda late.But it just takes a bit of math.

.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>

I don't have Windows so I didn't test this in IE.

fiddle: fiddle example..

Upvotes: 7

easwee
easwee

Reputation: 15915

Your parent is 120px wide - that is 100 width + 20 padding on each side so you need to make your line 120px wide. Here's the code. Next time note that padding adds up to element width.

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

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

Upvotes: 2

Martin Algesten
Martin Algesten

Reputation: 13620

The problem could come down to which box model you're using. Are you using IE?

When IE is in quirks mode, width is the outer width of your box, which means the padding will be inside. So the total area left inside the box is 100px - 2 * 10px = 80px in which case your 100px wide <hr> will not look right.

If you're in standards mode, width is the inner width of your box, and padding is added outside. So the total width of the box is 100px + 2 * 10px = 120px leaving exactly 100px inside the box for your <hr>.

To solve it, either adjust your CSS values for IE. (Check in Firefox to see if it looks okay there). Or even better, set a document type to kick the browser into strict mode - where also IE follows the standard box model.

<!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

Upvotes: 1

Sam
Sam

Reputation: 7078

Easy fix, just do 

margin:-10px

on the hr.

Upvotes: 280

Related Questions