Can I add background color only for padding?
Solution 1:
I am sorry everyone that this is the solution the true one where you don't have to actually set the padding.
https://jsfiddle.net/techsin/TyXRY/1/
What I have done...
- Applied two gradients on background with both having one start and end color. Instead of using solid color. Reason being that you can't have two solid colors for one background.
- Then applied different background-clip property to each.
- thus making one color extend to content box and other to border, revealing the padding.
Clever if I say so to myself.
div {
padding: 35px;
background-image: linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
background-clip: content-box, padding-box;
}<p>Padding IS COLORED</p>
<div>Mexican’t professor plum charlie chaplin? Facial accessory lorreto del mar Daniel plainview landed gentry circus strongman sam elliott zap rowsdower, lorreto del mar off-piste frightfully nice mustachio landed gentry Daniel plainview zap rowsdower toothbrush
circus strongman boogie nights sam elliott Daniel plainview facial accessory, Daniel plainview man markings boogie nights mr frothy-top sam elliott worn with distinction mustachio zap rowsdower off-piste Daniel plainview toothbrush lorreto del mar frightfully
nice wario facial accessory mr frothy-top landed gentry circus strongman prostate cancer? Rock n roll star gunslinger villain marquess of queensbury en time-warped cabbie off-piste graeme souness en time-warped cabbie, cunning like a fox gunslinger
dodgy uncle clive villain karl marx marquess of queensbury en time-warped cabbie graeme souness rock n roll star off-piste en time-warped cabbie, rock n roll star lemmy dodgy uncle clive graeme souness professor plum en time-warped cabbie villain gunslinger
en time-warped cabbie marquess of queensbury cunning like a fox devilish cad off-piste karl marx. John aldridge basil fawlty landed gentry louis xiii sam elliott brigadier, et sodales cum dick van dyke mouth coiffure louis xiii landed gentry basil fawlty
john aldridge stiff upper lip brigadier crumb catcher sam elliott?</div>Solution 2:
Use the background-clip and box-shadow properties.
1) Set background-clip: content-box - this restricts the background only to the content itself (instead of covering both the padding and border)
2) Add an inner box-shadow with the spread radius set to the same value as the padding.
So say the padding is 10px - set box-shadow: inset 0 0 0 10px lightGreen - which will make only the padding area light green.
Codepen demo
nav {
width: 80%;
height: 50px;
background-color: gray;
float: left;
padding: 10px; /* 10px padding */
border: 2px solid red;
background-clip: content-box; /* <---- */
box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */
}
ul {
list-style: none;
}
li {
display: inline-block;
}<h2>The light green background color shows the padding of the element</h2>
<nav>
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="/about/">About</a>
</li>
<li><a href="/blog/">Blog</a>
</li>
</ul>
</nav>For a thorough tutorial covering this technique see this great css-tricks post
Solution 3:
Another option with pure CSS would be something like this:
nav {
margin: 0px auto;
width: 100%;
height: 50px;
background-color: white;
float: left;
padding: 10px;
border: 2px solid red;
position: relative;
z-index: 10;
}
nav:after {
background-color: grey;
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: -1;
}<nav>Some text or anything</nav>Demo here