I want to put padding on a css border. Pull it inside a div, away from the edge. Is this possible using css (css3 is fine, webkit).
Here is the design.
I did this by placing a div inside a div, then give a border to the inner div. I want to make the markup slim as posible so I want to use only one div if posible.
Thank you.
7 Answers
You should be able to do this with the CSS outline property:
<style>
.outer { outline: 2px solid #CCC; border: 1px solid #999; background-color: #999; }
</style>
<div>
example
</div>Instead of borders, you may use outline property:
div{ height:300px; width:500px; background-color:lightblue; outline:dashed; outline-offset:-10px;
}<div></div>Unfortunately, without adding another div, I don't think you can do this with just CSS.
The more complicated your design gets, the more likely you will need extraneous html tags.
Your other (also not great) option is an image background, or if it somehow makes you feel better, you can add elements client side with JQuery, thereby maintaining the "purity" of your server side files.
Best of luck.
Padding around the border (which would separate it from the edge) is called the 'margin': for further details, see Box model.
3You could do that by creating a inner div with the borders you want and a outer div with a display: table. Something like this:
<style> .outer { background: #ccc; display: table; width: 400px; } .inner { border: 2px dashed #999; height: 50px; margin: 5px; }
</style>
<div>
<div>
</div>
</div>you can define a margin for the first child element based on the parent element selector. e.g.
.outer:first-child { margin : 10px;
}This way any element put inside the .outer will automatically have 10px margin. If you want this to be applied to any direct child of the outer element use "> *" instead. e.g.
.outer > * { margin : 10px;
}No, that's not possible. Padding, margin and border are all parts of elements, you can't give a border padding or a margin a border.
Maybe if you post an example of what you're trying to do we can come up with alternate solutions?
-update- Looking at your example I'm afraid it's still not possible, at least not with just one div. Im not a fan of divitis either, but the extra div probably is the best option in this case.
