Need to add 3px of padding to an empty div... I cannot access the markup, only the css

I'm tasked with making a change to a website which I'm not sure is even possible.

We have one element which is an image surrounded by 3px padding, a 1px border, and then a drop shadow.

The above image is how the y would like it

This one does not look as they want it.

We have another element which is an empty div with a background color set. The designer wants these two to look the same, but I only have access to the CSS. Is there some way I can get this to look the same using pseudo selectors?

Here's the CSS:

    float: left;
    height: 23px;
    margin: 3px;
    width: 23px;
    padding:2px;
    border:1px solid #d4d4d4;
    box-shadow:3px 3px 4px rgba(0开发者_C百科,0,0,0.1);
     -moz-box-shadow:3px 3px 4px rgba(0,0,0,0.1);
     -webkit-box-shadow:3px 3px 4px rgba(0,0,0,0.1);      

You can use the outline property, which draws outside the border.

Example

background:lightblue;
height: 23px;
margin: 3px;
width: 23px;
padding:2px;
border:3px solid white;
outline:1px solid #d4d4d4;

Edit: The outline will cover your drop shadow, so add a spread value to your box-shadow properties:

box-shadow:3px 3px 4px 1px rgba(0,0,0,0.1);
-moz-box-shadow:3px 3px 4px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:3px 3px 4px 1px rgba(0,0,0,0.1);   

You can use the :before or :after pseudo-elements to create an extra "hook" that will allow you to add two borders to your div. Like this:

div:before {
  background: blue;
  border: 3px solid white;
  /* :before will only display if it generates content,
     but that content may be empty: */
  content: '';
  display: block;
  width: 23px;
  height: 23px;
}

div {
  float: left;
  border: 1px solid #d4d4d4;
  box-shadow: 3px 3px 4px rgba(0,0,0,0.1);
}

This essentially works as if your empty div looked like this instead:

<div><div:before> </div:before></div>

If it's just a matter of having multiple borders or shadows, though, I'd go with Doug's far simpler answer.

Assuming CSS3 could be applied here, try using the new box-sizing property.

I have used this method -

CSS

div {
    float: left;
    background: #abcdef;
    height: 23px;
    width: 23px;
    border:1px solid #d4d4d4;
}

div:after {
    position: absolute;
    top: 8px;
    left: 8px;
    content: "";
    width: 27px;
    height: 27px;
    border: 1px solid #d4d4d4;
    box-shadow:3px 3px 4px rgba(0,0,0,0.1);
     -moz-box-shadow:3px 3px 4px rgba(0,0,0,0.1);
     -webkit-box-shadow:3px 3px 4px rgba(0,0,0,0.1);
}

Example

See this

Reference

A great tutorial for a technique of this sort

Dude, I totally figured out another method that is way better than the others, including the one I gave before. (I got the idea here, and it makes me feel dumb I didn't think of this before.)

You can use multiple box-shadows, like so:

.multipleBordersPlusADropShadowAsWell
{
    box-shadow: 0 0 0 3px #fff, 
                0 0 0 4px #555, 
                3px 3px 4px 4px rgba(0,0,0,0.2);
}

See example

The box shadows overlay each other with the first ones on top. The first two have zero blur and finite spread so they act like borders. The third has a blur plus spread to show up outside the first two.

Use a bigger border: border:4px solid #ffffff;