Double Border size

[sciencebear]

I am trying to use a double border on an image on my site and I want there to be more space between the borders without them increasing in thickness.

 

I want them to be about as thick as if I did this code:

img{
    border: 3px double #000000;
}

Unfortunately that code puts the borders too close.

[haku]

Unfortunately I don't believe there is any way to currently do this using the double border in CSS. But, you can *maybe* fake it like this:

 

<div class="outer">
  <div class="inner">
    some content
  </div>
</div>

 

.outer
{
  border: solid black 3px;
}

.inner
{
  margin: 2px; // adjust this value to change the spacing between borders. 
  border: solid black 3px;
}

[TheFilmGod]

Unfortunately I don't believe there is any way to currently do this using the double border in CSS. But, you can *maybe* fake it like this:

 

<div class="outer">
  <div class="inner">
    some content
  </div>
</div>

 

.outer
{
  border: solid black 3px;
}

.inner
{
  margin: 2px; // adjust this value to change the spacing between borders. 
  border: solid black 3px;
}

 

Why would you need to "fake" anything with another extraneous tag. Here's a quick fix:

 

<div class="border">

<img src="image.png" width="x" height="x" />

</div>

 

css:

 

.border {

border: 3px solid gray;

padding: 5px;

}

.border img {

border: 3px solid gray;

}

 

The padding is key. It creates the "spacing" between the borders. If you want the image to have space between the first inner border, I am afraid you will need to use another div. Don't bloat your code if you don't need to, so only use the two divs if you need an additional space.

[haku]

Why would you need to "fake" anything with another extraneous tag.

 

Mate, you did exactly the same thing I did. I showed two elements - one contained in the other. You showed two elements - one contained in the other. The only difference was that I gave him an abstract example, you gave him a specific one to his problem.

 

So my question is why would you need to fake anything with another extraneous tag? Answer that, and you will have my answer to your question.

[TheFilmGod]

Sorry Haku, didn't notice that you provided a generic answer, which works perfectly well. In all honesty, I skimmed over your code and at the percise moment I saw the two div tags, my mind started to race and I came out with my code.

 

Something I do want to point though. In most circumstances, you could use the first child in the parent div to create a second border. That's exactly what you did and what I did. Therefore, sometimes a div can we swapped in with an image and save a tag.

 

Whichever way the OP tries to go around with this will be perfectly acceptable.

[sciencebear]

That's exactly what I ended up doing-works great.