Ignore parent padding

Question

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

User · Answer

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

User · Answer

Here is another way to do it    lt style gt       padded-element margin  0px  padding  10px        padded-element img margin-left  -10px  width  calc 100    10px   10px     lt  style gt   lt p class  padded-element  gt       lt img src  https   images pexels com photos 3014019 pexels-photo-3014019 jpeg auto compress amp cs tinysrgb amp dpr 2 amp h 650 amp w 940  gt   lt  p gt    Here are some examples on repl it  https   repl it  bryku LightgrayBleakIntercept

User · Answer

Easy fix  just do   margin -10px   on the hr

User · Answer

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

User · Answer

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        lt div class  content  gt      lt p gt A paragraph lt  p gt     lt p gt Another paragraph  lt  p gt     lt p gt No more content lt  p gt       lt div class  bottom-content  gt        I want this div to ignore padding     lt  div gt    I don t have Windows so I didn t test this in IE   fiddle  fiddle example

User · Answer

Another solution  position  absolute  top  0  left  0   just change the top right bottom left to your case

User · Answer

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

User · Answer

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  lt hr gt  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  lt hr gt    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    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN           http   www w3 org TR html4 strict dtd  gt   lt html gt         http   www quirksmode org css quirksmode html

User · Answer

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

User · Answer

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

User · Answer

easy fix   add to parent div   box-sizing  border-box

User · Answer

margin  0 -10px     is better than  margin  -10px    The later sucks content vertically into it

[html] Ignore parent padding

Examples related to html

Examples related to css