Negative Padding

Developer
Brandon Kennedy
Size
4,069 Kb
Views
20,240
  1. Negative Padding Previews
  2. Negative Padding HTML Codes
  3. Negative Padding CSS Codes

How do I make an negative padding?

Encountered a problem with negative padding today. Thats right, I said, "NEGATIVE padding".. What is a negative padding? How do you make a negative padding? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.

Negative Padding Previews
IQ Test

Negative Padding - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Negative Padding</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>So Negative Padding Is A Thing...</h1>
<h2>But you have to do some special stuff to get it.</h2>
<p>First, use one of these bad boys</p>
<div class="browsers"> <svg id="edge" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50" height="50" viewBox="0 0 32 32"> <path fill="#2c75be" d="M0.481 14.206c0.938-7.4 5.987-14.113 15.037-14.206 5.463 0.106 9.956 2.581 12.631 7.3 1.344 2.462 1.762 5.050 1.85 7.906v3.356h-20.081c0.094 8.281 12.188 8 17.394 4.35v6.744c-3.050 1.831-9.969 3.469-15.325 1.363-4.563-1.712-7.813-6.488-7.794-11.081-0.15-5.956 2.962-9.9 7.794-12.144-1.025 1.269-1.806 2.669-2.213 5.094h11.338c0 0 0.663-6.775-6.419-6.775-6.675 0.231-11.488 4.112-14.213 8.094v0z"/> </svg> <svg id="ie" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50" height="50" viewBox="0 0 32 32"> <path fill="#00baf0" d="M22.944 19.651h7.377c0.057-0.512 0.080-1.034 0.080-1.569 0-2.507-0.673-4.858-1.848-6.883 1.215-3.228 1.172-5.968-0.455-7.606-1.547-1.54-5.697-1.29-10.388 0.787-0.347-0.026-0.697-0.040-1.051-0.040-6.439 0-11.841 4.431-13.335 10.402 2.020-2.586 4.145-4.461 6.984-5.826-0.258 0.242-1.764 1.739-2.018 1.993-7.486 7.484-9.847 17.26-7.306 19.8 1.931 1.93 5.43 1.604 9.449-0.364 1.869 0.952 3.984 1.488 6.226 1.488 6.035 0 11.15-3.885 13.003-9.295h-7.433c-1.023 1.887-3.023 3.171-5.319 3.171s-4.296-1.284-5.319-3.171c-0.455-0.852-0.716-1.83-0.716-2.864v-0.023h12.071zM10.884 16.025c0.171-3.035 2.694-5.456 5.774-5.456s5.604 2.421 5.774 5.456h-11.548zM28.030 5.119c1.048 1.059 1.021 3.007 0.125 5.438-1.535-2.341-3.766-4.186-6.4-5.239 2.816-1.207 5.106-1.367 6.274-0.199zM2.921 30.227c-1.337-1.337-0.934-4.144 0.788-7.526 1.072 3.008 3.161 5.534 5.854 7.161-2.982 1.354-5.423 1.584-6.643 0.365z"/> </svg>
</div>
<p>Then you have to be creative with your padding rules, because they don't like to be told outright to use a negative padding. Fortunately, both of these gentlemen are pretty dumb and can be easily confused with math.</p>
<pre>
<span class="rule">.parent</span> { <span class="prop">border</span>: <span class="value">2px solid black</span>; <span class="prop">padding</span>: <span class="value">20px calc(20px * -1)</span>;
}
<span class="rule">.child</span> { <span class="prop">border</span>: <span class="value">2px solid red</span>;
}
</pre>
<p>And this is the result</p>
<div class="examples"> <div class="example"> <h3>Chrome / Safari / FF</h3> <div class="parent"> <div class="child"></div> </div> </div> <div class="example ie"> <h3>IE / Edge</h3> <div class="parent"> <div class="child"></div> </div> </div>
</div>
<p class="disclaimer">I styled this so you would see how the code sample above would render in IE/Edge since I hope you aren't using that to look at this pen right now. You'll just have to trust me that this is what would happen. Or duplicate it and test it on your own.</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Negative Padding - Script Codes CSS Codes

body { background: -webkit-radial-gradient(farthest-corner, #ffffff 65%, #ccf2ff); background: radial-gradient(to farthest-corner, #ffffff 65%, #ccf2ff); color: #333; min-height: 100vh; padding: 20px; text-align: center;
}
.browsers { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.browsers svg { margin: 0 50px;
}
pre { background: #333; border-radius: 10px; color: white; display: inline-block; padding: 10px; text-align: left;
}
pre .rule { color: #f8df46;
}
pre .prop { color: #b698da;
}
pre .value { color: lightskyblue;
}
.examples { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around;
}
.example.ie .child { margin-left: -20px; margin-right: -20px; width: 140px;
}
.example div { border: 2px solid; border-radius: 4px;
}
.example .parent { border-color: black; box-sizing: content-box; height: 60px; margin: auto; padding: 20px 0; width: 100px;
}
.example .child { border-color: red; height: 60px; width: 100px;
}
.disclaimer { font-size: 12px; margin-top: 20px;
}
*, *:before, *:after { box-sizing: border-box;
}
*, *:focus, *:active, *:focus:active, *:before, *:before:focus, *:before:active, *:before:focus:active, *:after, *:after:focus, *:after:active, *:after:focus:active { outline: none;
}
Negative Padding - Script Codes
Negative Padding - Script Codes
Home Page Home
Developer Brandon Kennedy
Username brandonkennedy
Uploaded September 18, 2022
Rating 3.5
Size 4,069 Kb
Views 20,240
Do you need developer help for Negative Padding?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brandon Kennedy (brandonkennedy) Script Codes
Name
Digital Static Search Box
Button disabled and loading states
More loading
Box-shadow loader
Space ship fun
Compare Some Different Grid Systems
CSS Animated Search Box Concepts
CSS Only Banner Rotation
SCSS Tick Marks Function
Crooked section dividers
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!