Why does CSS not support negative padding?

css negative margin not working
css negative margin browser support
if you use negative values for padding it will result in
css negative padding alternative
css negative margin overlap
negative padding bootstrap
negative margin not working in email template
padding css

I have seen this many a times that the prospect of a negative padding might help the development of CSS of certain page elements become better and easier. Yet, there is no provision for a negative padding in the W3C CSS. What is the reason behind this? Is there any obstruction to the property that prevents it's use as such? Thanks for your answers.

UPDATE As I see, for example, in case you are using a font that has something, say, a 20px of vertical spacing, and you wish to apply a dashed border to the bottom of the font, say when a hyperlink appears. In such cases you'll find the style to be way too shabby, as the dashed border will appear 20px below the specified word. if you use negative margin, it's not going to work, as margin alters the area outside borders. Negative padding might help in such situations.


I recently answered a different question where I discussed why the box model is the way it is.

There are specific reasons for each part of the box model. Padding is meant to extend the background beyond its contents. If you need to shrink the background of the container, you should make the parent container the correct size and give the child element some negative margins. In this case the content is not being padded, it's overflowing.

[Solved] css negative padding, Why do we have negative margin in CSS, while there's no possibility to will be not pulling the following elements in the direction of negative� Why do we have negative margin in CSS, while there’s no possibility to set negative padding? The first thing which comes to mind is probably: “Because negative padding makes no sense!”. It’s not a complete answer though.


Padding by definition is a positive integer (including 0).

Negative padding would cause the border to collapse into the content (see the box-model page on w3) - this would make the content area smaller than the content, which doesn't make sense.

Negative Padding: Unboxing the Box Model – Marta Sztybor Blog, Board index CSS HTML Validator Technical Support The book I learned CSS from told me it was OK. (I know that negative margins are used by some " stylists" and are Yes, padding values should not be negative. Is needed in the span because it is an inline elements. By default you cannot add top or bottom padding to an inline element only left and right. So the span will be padded even if you put padding to 0. Also you need to change your line-height to 48px.


I would like to describe a very good example of why negative padding would be useful and awesome.

As all of us CSS developers know, vertically aligning a dynamically sizing div within another is a hassle, and for the most part, viewed as being impossible only using CSS. The incorporation of negative padding could change this.

Please review the following HTML:

<div style="height:600px; width:100%;">
    <div class="vertical-align" style="width:100%;height:auto;" >
        This DIV's height will change based the width of the screen.
    </div>
</div>

With the following CSS, we would be able to vertically center the content of the inner div within the outer div:

.vertical-align {
    position: absolute;
    top:50%;
    padding-top:-50%;
    overflow: visible;
}

Allow me to explain...

Absolutely positioning the inner div's top at 50% places the top edge of the inner div at the center of the outer div. Pretty simple. This is because percentage based positioning is relative to the inner dimensions of the parent element.

Percentage based padding, on the other hand, is based on the inner dimensions of the targeted element. So, by applying the property of padding-top: -50%; we have shifted the content of the inner div upward by a distance of 50% of the height of the inner div's content, therefore centering the inner div's content within the outer div and still allowing the height dimension of the inner div to be dynamic!

If you ask me OP, this would be the best use-case, and I think it should be implemented just so I can do this hack. lol. Or, they should just fix the functionality of vertical-align and give us a version of vertical-align that works on all elements.

negative padding, I have seen this many a times that the prospect of a negative padding might help the development of CSS of certain page elements become� CSS Padding. The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).


This could help, by the way:

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements.

http://www.w3.org/TR/css3-ui/#box-sizing https://developer.mozilla.org/En/CSS/Box-sizing

Why does CSS not support negative padding?, Negative padding is not supported. margin on the other hand, can be negative. However, there are better ways to position than using negative margins (imho). Definition and Usage. An element's padding is the space between its content and its border. The padding property is a shorthand property for:. padding-top; padding-right; padding-bottom


You asked WHY, not how to cheat it:

Usually because of laziness of programmers of the initial implementation, because they HAVE already put way more effort in other features, delivering more odd side-effects like floats, because they were more requested by designers back then and yet they haven't taken the time to allow this so we can use the FOUR properties to push/pull an element against its neighbors (now we only have four to push, and only 2 to pull).

When html was designed, magazines loved text reflown around images back then, now hated because today we have touch trends, and love squary things with lots of space and nothing to read. That's why they put more pressure on floats than on centering, or they could have designed something like margin-top: fill; or margin: average 0; to simply align the content to the bottom, or distribute its extra space around.

In this case I think it hasn't been implemented because of the same reason that makes CSS to lack of a :parent pseudo-selector: To prevent looping evaluations.

Without being an engineer, I can see that CSS right now is made to paint elements once, remember some properties for future elements to be painted, but NEVER going back to already-painted elements.

That's why (I guess) padding is calculated on the width, because that's the value that was available at the time of starting to paint it.

If you had a negative value for padding, it would affect the outer limits, which has ALREADY been defined when the margin has already been set. I know, nothing has been painted yet, but when you read how the painting process goes, created by geniuses with 90's technology, I feel like I am asking dumb questions and just say "thanks" hehe.

One of the requirements of web pages is that they are quickly available, unlike an app that can take its time and eat the computer resources to get everything correct before displaying it, web pages need to use little resources (so they are fit in every device possible) and be scrolled in a breeze.

If you see applications with complex reflowing and positioning, like InDesign, you can't scroll that fast! It takes a big effort both from processors and graphic card to jump to next pages!

So painting and calculating forward and forgetting about an element once drawn, for now it seems to be a MUST.

11/25 negative values for padding, Negative margins are wholly supported across all modern browsers (and IE6 Negative margins are not your everyday CSS so they should be� Because of this, CSS layouts have since then been synonymous with coding elegance. Since the recommendation of CSS2 back in 1998, the use of tables has slowly faded into the background and into the history books. Because of this, CSS layouts have since then been synonymous with coding elegance. Out of all the CSS concepts designers have ever used, an award probably needs to be given to the use of Negative Margins as being the most least talked about method of positioning.


The Definitive Guide to Using Negative Margins, The third paragraph has a negative margin-bottom, which has no effect, since it does not have a bottom neighbour. Remember: margin collapsing� However, I can't seem to properly accomplish that task. I've change the margin and padding of both the nav and the maintext id in my CSS to and it still won't seem to budge. I then tried a variety of display style changes (though not all, as I'm new to CSS and idk which one would do the job). Most of them didn't seem to work.


Negative margins in CSS, The margin-bottom property is specified as the keyword auto , or a <length> , or a <percentage> . Its value can be positive, zero, or negative. Please clarify whether you're looking for padding or margin. Your current CSS should add 20 margin to the left of all divs. If you want padding specifically around the text you could add a CSS rule for the .Roboto class, for example "padding: 20px".


margin-bottom, If the padding property has one value: padding:10px;. all four paddings are 10px. Note: Negative values are not allowed. Default� The latter (which is W3C about CSS 2.1) says: Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block. (I know that negative margins are used by some "stylists" and are officially allowed.)