Ignore parent padding

HtmlCss

Html Problem Overview

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.

Html Solutions

Solution 1 - Html

Easy fix, just do

margin:-10px

on the hr.

Solution 2 - Html

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
}

Solution 3 - Html

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

Solution 4 - Html

Another solution:

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

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

Solution 5 - Html

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

Solution 6 - Html

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.

Solution 7 - Html

margin: 0 -10px;

is better than

margin: -10px;

The later sucks content vertically into it.

Solution 8 - Html

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

Solution 9 - Html

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

Solution 10 - Html

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

Solution 11 - Html

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

Solution 12 - Html

easy fix.. add to parent div:

box-sizing: border-box;

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

belongs_to through associations

Ruby on-RailsRuby on-Rails-3Activerecord

Next Solution:

Best way to parseDouble with comma as decimal separator?

Java

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSamView Question on Stackoverflow
Solution 1 - HtmlSamView Answer on Stackoverflow
Solution 2 - Htmladriancho5692View Answer on Stackoverflow
Solution 3 - HtmlMitchell GeereView Answer on Stackoverflow
Solution 4 - HtmlGohchiView Answer on Stackoverflow
Solution 5 - HtmlsqramView Answer on Stackoverflow
Solution 6 - HtmlMarnix.hohView Answer on Stackoverflow
Solution 7 - HtmlhonkskilletView Answer on Stackoverflow
Solution 8 - HtmleasweeView Answer on Stackoverflow
Solution 9 - HtmlMartin AlgestenView Answer on Stackoverflow
Solution 10 - HtmlDillon BurnettView Answer on Stackoverflow
Solution 11 - HtmltreyarderView Answer on Stackoverflow
Solution 12 - HtmlJaclyn UView Answer on Stackoverflow