[英]Border padding/spacing outside of a button
我在我正在处理的网站上设置了按钮。 我想在按钮之外创建一个 2px 的边框,有一点间距。 见设计图。
我可以创建边框,但不能创建边框之外的间距。 这是当前的开发站点。 按钮是第一个图形。
到目前为止,我已经尝试了 2 种方法..
添加透明边框。 不幸的是,我可以看到按钮的蓝色背景,所以这不起作用。
.hsContainer a.action_button { padding: 15px 40px; border: 5px solid rgba(255, 255, 255, .0); outline: 2px solid #fff; }
在按钮外部添加了一个 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.