Why Does CSS Not Support Negative Padding

Why does CSS not support negative padding?

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.

How do I achieve negative padding in CSS?

It completly depends on the font you use, but in your particular case height: 34pxand line-height: 34px; do what you want:

h1 {  background-color: #375E97;  color: #FFFFFF;    font-size: 50px;  font-family: 'Righteous', cursive;  text-transform: uppercase;  text-align: center;    padding: 0px;  margin: 0 auto;    height: 34px;  line-height: 34px;}

<!DOCTYPE html><html>
<head>  <link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet"></head>
<body>  <h1>Lorem Ipsun Al</h1></body>
</html>

How to use negative padding in css

You can't.

See the specification:

Unlike margin properties, values for padding values cannot be negative.

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

Negative margins are valid in css and understanding their (compliant) behaviour is mainly based on the box model and margin collapsing. While certain scenarios are more complex, a lot of common mistakes can be avoided after studying the spec.

For instance, rendering of your sample code is guided by the css spec as described in calculating heights and margins for absolutely positioned non-replaced elements.

If I were to make a graphical representation, I'd probably go with something like this (not to scale):

negative top margin

The margin box lost 8px on the top, however this does not affect the content & padding boxes. Because your element is absolutely positioned, moving the element 8px up does not cause any further disturbance to the layout; with static in-flow content that's not always the case.

Bonus:

Still need convincing that reading specs is the way to go (as opposed to articles like this)? I see you're trying to vertically center the element, so why do you have to set margin-top:-8px; and not margin-top:-50%;?

Well, vertical centering in CSS is harder than it should be. When setting even top or bottom margins in %, the value is calculated as a percentage always relative to the width of the containing block. This is rather a common pitfall and the quirk is rarely described outside of w3 docos

Is it bad practice to use Negative Margins or Padding in CSS

No; it's not bad practice, so long as you're aware of the fact you're using negative margins, and that this necessarily 'pulls'/'moves' elements from their otherwise-'normal' position.

Why would you even worry about this?

Why is negative margin not working?

Try using position: relative and right instead of margin-right. It's more reliable since it doesn't take the element's position into account when positioning other elements, like margin does. For bonus points you could even use transform: translate instead of right.

function clicked_resume(OnScreen){    var resume = document.getElementById('resume_page');    if(OnScreen == 1)    {        resume.className = '';        clicked_about(0);    }    else if(OnScreen == 0)    {        resume.className = 'unseen';    }    }
function clicked_about(OnScreen){       var about = document.getElementById('intro_page');    if(OnScreen == 1)    {        about.className = '';        clicked_resume(0);
    }    else if(OnScreen == 0)    {        about.className = 'unseen';    }}

body {    margin: 0;    overflow-x: hidden;}
#intro_page.unseen{    display: block; right: -100%;}

#intro_page{ position: relative;    right: 0px; display: block; -webkit-transition: right 1.5s ease-in; transition: right 1.5s ease-in;}
#resume_page.unseen{ display: block; left: -600px;}
#resume_page{ position: relative;    left: 0px; display: block; -webkit-transition: left 1.0s ease-in; transition: left 1.0s ease-in;}

<h2 class="title_bar"><ul>      <li><span onclick = "clicked_about(1)">About</span></li> <li><span onclick="clicked_resume(1)">Resume</span></li></ul>     </h2> 
 <div id="intro_page" class="unseen"> <p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p> <figure class="intro_pic1">     <img src="img/award.jpg" alt="Receiving Award" height="50" />     <figcaption>Award 2015</figcaption> </figure></div>
<div id="resume_page" class="unseen"> <p>My resume</p></div>

Negative margin can't go more negative

For inline (inline-block) elements it appears they don't go beyond their height (can't say/find why), so if you for example change padding greater that 20px, you can have a negative margin as big.

If you do change the anchor to a block level element though, the negative margin applies properly.

Sample 1 - padding

nav { /*height: 60px;*/ border: 2px solid black;}a {  display: inline-block;  text-decoration: none;  background-color: lightgreen;  color: grey;  font-weight: bold;  padding: 40px;  border-bottom: 2px solid red;  margin-top: -40px; /* more negative value doesn't move the link more to the top */}

<h1>Testing</h1><nav>  <a href="#">link 1</a></nav><p>some text so we can see how it is affected when setting various properties</p>

Why Does CSS Not Support Negative Padding