边框填充/按钮之外的间距

Question

我在我正在处理的网站上设置按钮。我想在按钮之外创建一个2像素的边框，并且有一定的间距。看设计的图像。

我能够创建边框，而不是在它之外的间距。这是当前的开发网站。该按钮是第一个图形。

我已经试过2点的方法，到目前为止..

1. 添加透明边框。不幸的是，我可以看到按钮的蓝色背景，所以这不起作用。

   .hsContainer a.action_button { 
       padding: 15px 40px; 
       border: 5px solid rgba(255, 255, 255, .0); 
       outline: 2px solid #fff; 
   } 
   

2. 在按钮外添加了一个div，并添加了一个填充边框。

   .slide-button { 
       padding: 10px; 
       border: 2px solid #fff; 
   } 
   

虽然这看起来很正常的顶部和底部，在其两侧延伸横跨部位的长度。我无法添加固定宽度，因为它们会有所不同，所以我不确定如何使其工作。

任何想法？

Answer 1

我相信你正在寻找outline-offset，像这样：

.hsContainer a.action_button { 
    padding: 15px 40px; 
    outline: 2px solid white; 
    outline-offset: 2px; 
} 

Answer 2

youre寻找display: inline-block。现在，你的div是一个块，这意味着它扩展到其父级的全部宽度（在这种情况下是页面的宽度）。 inline-block使得 “拥抱它包含的内容”

.slide-button { 
    padding: 10px; 
    display: inline-block; //add this line 
    border: 2px solid #fff; 
}