繁体   English   中英

按钮外的边框填充/间距

[英]Border padding/spacing outside of a button

我在我正在处理的网站上设置了按钮。 我想在按钮之外创建一个 2px 的边框,有一点间距。 见设计图。

我可以创建边框,但不能创建边框之外的间距。 这是当前的开发站点。 按钮是第一个图形。

到目前为止,我已经尝试了 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; }

虽然这在顶部和底部看起来不错,但在侧面它延伸到整个场地的长度。 我无法添加固定宽度,因为它们会有所不同,所以我不确定如何让它工作。

有任何想法吗?

我相信您正在寻找轮廓偏移 ,像这样:

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

您正在寻找display: inline-block 现在,您的div是一个块,这意味着它会扩展到其父级的整个宽度(在这种情况下为页面的宽度)。 inline-block使其“拥抱它包含的内容”

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

我有一个类似的问题,对我有帮助的是ff:

display: inline-block;

margin: (margin of your choice);

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM