发表新帖
发表新帖

Ignore parent padding

后端 未结
关注
12 866
梦如初夏
梦如初夏 2021-01-30 19:23

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

Here\'s a simple example of what I have:

#par
相关标签:
12条回答
  • 日久生厌
    2021-01-30 19:31

    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;
}
    0 讨论(0)
  • 天涯浪人
    2021-01-30 19:33

    Another solution:

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

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

    0 讨论(0)
  • 日久生厌
    2021-01-30 19:35

    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

    0 讨论(0)
  • 南笙
    2021-01-30 19:38

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

    0 讨论(0)
  • 一整个雨季
    2021-01-30 19: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;
}
    0 讨论(0)
  • 不思量自难忘°
    2021-01-30 19:45

    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

    0 讨论(0)
 看不清?
提交回复
热议问题