creating spacing between an element and its border

问题

I'm trying to create a spacing between an element and its outermost border. (EDIT: he wants to do two borders between the element proper and the outside of the box-model box. This gives him the room of using the margin, border and padding to achieve his goal). So far my searches in Google and here produced no solution to this.

I am trying to avoid using images to acheive this.

回答1:

You want padding.

Here's a link to a site that demonstrates "margin", "border", and "padding" for an element. http://css-tricks.com/the-css-box-model/

However, there used to be a problem with IE's rendering of the box model and the "rest of the world" in that IE used a different mechanism to determine "overall width". You need to understand that if you plan on supporting IE7 (two generations old) or older.

I imagine that using the "rest of the world" way will be sufficient for your needs.

For the rest of the world (and the sake of when that link no longer works) here's an ascii version of the same diagram:

+----------------------------+
|                            |
|          margin            |
|                            |
|   *******border**********  |
|   *                     *  |
|   *      padding        *  |
|   *                     *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *   ---ELEMENT-----   *  |
|   *   ---------------   *  |
|   *   ---------------   *  |
|   *                     *  |
|   ***********************  |
|                            |
|                            |
+----------------------------+

回答2:

You can do something like this with inset border

.box {
    background-color: #e1309e;
    border: 10px solid #6a51d2;
    height: 80px;
    width: 80px;
    box-shadow: 0 0 0 10px #f3f5f6 inset;
    box-sizing: border-box;
 }

<div class="box"></div>

JSFiddle Demo

回答3:

You can do one of 2 things. What you're coding for will determine what you use.

Padding could be added to the container (outer) element to push the element inside away from it's border.

Margin could be used on the inner element to push itself away from the container.

My experience is that if you're designing for the web, use either, checking in all browsers to make sure that your spacing is correct.

However, if you're coding for an HTML email, you should use Margin - in some applications (Outlook 2007) Padding does not work in some instances.

回答4:

I ended up using the multiple css technique (here), and using border-color: transparent to create a transparent spacing between the element and its border.

回答5:

The backgroud-clip can be used:

div {
  border: 1px dotted black;
  padding: 5px;
  background: green;
  background-clip: padding-box;
}

来源：https://stackoverflow.com/questions/5664877/creating-spacing-between-an-element-and-its-border

标签

css

border