border 和 background-image 之间增加 space

Question

我想增加边框和背景图像之间的距离...我尝试添加 padding: 20px; 但它不起作用。

.Tab1 {
  background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
  width: 100px;
  height: 75px;
  display: block;
}
.Tab1:hover {
  border: 1px solid green;
}

<div class="Tab1"></div>

Answer 1

您可以 增加边框和背景图像之间的 space 和 padding 和 background-clip:content-box;（请参阅 MDN more info).

另外不要忘记将背景图片居中 background-position:center;

.Tab1 {
    background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
    background-position:center;
    width:100px;
    height:73px;
    display:block;
    padding:20px;
    background-clip:content-box;
}
.Tab1:hover {
    border:1px solid green;
}

<div class="Tab1"></div>

如果您还想避免由边框创建的悬停时位置对齐，您可以添加透明边框并且只更改悬停时的颜色:

.Tab1 {
  background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-clip: content-box;
  width: 100px;
  height: 75px;
  display: block;
  padding: 50px;
  border: 1px solid transparent;
}
.Tab1:hover {
  border-color: green;
}

<div class="Tab1"></div>

Answer 2

.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
    background-repeat:no-repeat;
    background-position:center;
 background-clip:content-box;
        width:100px;
        height:75px;
        display:block;
padding:20px;
}

.Tab1:hover{border:1px solid green;}

这就是您所需要的，您首先将背景与框的中心对齐，然后添加带有内边距 CSS 的内边距，就像您最初尝试的那样。 background-repeat 属性将停止背景重复到 CSS 的填充中。

还请记住向填充值添加单位，以防万一您尝试执行添加 padding:20 时所写的操作。

Answer 3

您可以在此处检查图像和边框之间的 space...

.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
        width:100px;
        height:75px;
        display:block;
        padding:15px;
        background-repeat:no-repeat;
        background-position:center center;
        border:1px solid #fff;
    }
.Tab1:hover{border:1px solid green;}

<div class="Tab1">
    
    
</div>

谢谢

Answer 4

css code     
.Tab1 {   
   background:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
   background-position:center;
   background-repeat:no-repeat;
   width:100px;
   height:75px;
   display:block;
   padding:15px;
   }
   .Tab1:hover {   
   border:1px solid green;
   margin-left:-1px;
   margin-top:-1px;
   }

border 和 background-image 之间增加 space

Increase space between border and background-image

css

border

background-image