CSS - Space between border and background color
Solution 1
UPDATE: Your scenario JSFIddle example.
You could use margin to show white background through. JSFiddle example here.
HTML:
<div class="outer"><div class="inner">Name And Address Details</div></div>
CSS
.outer {
display: inline-block;
border-left: 1px solid #d5d5d5;
}
.outer .inner {
padding: 5px 10px;
background: #ddd;
margin-left: 1px;
}
In your example li would be outer and a inner.
Solution 2
Set the border on the list element, background colour & padding on the anchor tag (not the list element), and then apply a margin to the anchor tag.
For example:
ul {
list-style:none;
}
li {
width:250px;
text-align:center;
border-left:1px solid #d5d5d5;
border-right:1px solid #d5d5d5;
}
li a {
color: #8f1b1f;
background-color: #F0F0F0;
text-decoration:none;
padding:10px;
display:block;
margin:0 2px;
}
Fiddle: http://jsfiddle.net/RCwE6/2/
Solution 3
If you have background on that element, then, adding padding would be useless.
So, in this case, you can use background-clip: content-box; or outline-offset
Explanation: If you use wrapper, then it would be simple to separate the background from border. But if you want to style the same element, which has a background, no matter how much padding you would add, there would be no space between background and border, unless you use background-clip or outline-offset
Related videos on Youtube
user3725340
Updated on June 04, 2022Comments
-
user3725340 almost 2 years
I need to create white space between the border and background color.
Example
Okay so, | = border, # = background color
Above example would be drawn like |#####| and I need | ##### |
How would I go about doing that?
Code I have for the example in the picture is (below)
CSS
.nav-justified > .active > a, .nav-justified > .active > a:hover, .nav-justified > active > a:focus { background-color: #F0F0F0; background-image: none; color: #8f1b1f; left: 0; width: 100%; margin-top: -17px; padding-bottom: 20px; padding-top: 20px; padding-right: 20px; padding-left: 20px; } .nav-justified > li > a { border-left: 1px solid #d5d5d5; line-height: 2px; }
HTML
<ul class="nav nav-justified" id="tableButtons"> <li class='active'><a href="#">Text here</a></li> </ul>
-
user3725340 almost 10 yearsThere is a lot of code to post, which bits would you need? In this example its just the contents of the li active class that needs work doing to it. EDIT: Added ul html code around it, does that help?
-
Paulie_D almost 10 yearsI'm assuming the anchor is
display:block
? -
user3725340 almost 10 yearsYes, its display:block
-
Paulie_D almost 10 yearsThen you will either have to use a gradient for the background color or limit the width of the anchor so that some background color of the
li
can show through. -
T J almost 10 yearsYou need to put quotes
(')
around the class in html and dot(.)
in front of class name in css. -
user3725340 almost 10 yearsWith a gradient can I achieve the | #### | effect? If I limit the width of anchor, it ruins the responsiveness of text, ie. screws up. width:95% is as low as I can go, which creates a space on the right hand side of the border.. as thats the next elements border if you get my drift?
-
user3725340 almost 10 yearsAnd the quotes and dots infront of class name is just me quickly writing it out.. it has dots and quotes on the actual piece of code.
-
K K almost 10 yearsWhy not give padding and border to li and background to the anchors? Will it solve your problem?
-
-
user3725340 almost 10 yearsBorder is only on the left hand side
-
MLeFevre almost 10 years@user3725340 Ah, looked like from your image that you wanted borders on the left and right. Still, you would need only to remove
border-right:1px solid #d5d5d5;
-
JungleZombie almost 10 yearsYou can just edit the css out, and leave the border where needed. UPDATED the code
-
user3725340 almost 10 yearsThank you, with a few minor adjustments, the method for my scenario worked.. that JSFiddle code, tweaked.
-
user3725340 almost 10 yearsThanks for the detailed answer, there were a few tweaks that I had to make in order to achieve the effect still after applying the code you provided.. but thats down to my situation, and the rest of the code that I didn't show.. So thanks for the help :)