CODEWITHSUNDEEP
css
floatleft
floatleft

Reputation: 6561

Padding on div border

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.

Border Example

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.

Upvotes: 34

Views: 173924

Answers (7)

R...
R...

Reputation: 2620

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;
}

Upvotes: 0

seyhan
seyhan

Reputation: 795

Instead of borders, you may use outline property:

div{
  height:300px;
  width:500px;
  background-color:lightblue;
  outline:dashed;
  outline-offset:-10px;    
}
<div></div>

http://jsfiddle.net/H7KdA/

Upvotes: 35

Edd Turtle
Edd Turtle

Reputation: 1531

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 class="outer">
example
</div>

Upvotes: 39

martins
martins

Reputation: 23

You 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 class="outer">

<div class="inner">
</div>

</div>

Upvotes: 1

Jay
Jay

Reputation: 901

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.

Upvotes: 1

Stephan Muller
Stephan Muller

Reputation: 27630

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.

Upvotes: -1

ChrisW
ChrisW

Reputation: 56123

Padding around the border (which would separate it from the edge) is called the 'margin': for further details, see Box model.

Upvotes: 1

Related Questions