Question

我正在尝试将按钮的边框设为内部，这样按钮就不会修改它的间距。

当按钮边框的大小增加时，我希望它不会影响其他元素。

HTML：

<div class="text1">Some text 1</div>
<button class="button">Button</button>
<div class="text2">Some text 2</div>

CSS：

.text1,
.text2,
.button {
    display:inline;
}
.text1,
.text2 {
    padding:2px;
    border:1px solid black;
}
button {
    background-image:none;
    border:4px solid blue;
}

https://jsfiddle.net/ow67a8o6/

Answer 1

box-sizing:border-box应该适合你。

另外，inline-block通常比inline好，但这取决于您的使用情况。

＆＃13;

.text1,
.text2,
.button {
  display: inline-block;
}
.text1,
.text2 {
  padding: 2px;
  border: 1px solid black;
}
button {
  background-image: none;
  border: 4px solid blue;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

＆＃13;

<div class="text1">Some text 1</div>
<button class="button">Button</button>
<div class="text2">Some text 2</div>

＆＃13;

<强>替代

不要使用边框，请使用插入框阴影

＆＃13;

.text1,
.text2,
.button {
  display: inline-block;
  padding: 12px;
  border: 1px solid black;
}
button {
  background-image: none;
  box-shadow: inset 0 0 0 2px blue;
  border: none;
}
button:hover {
  box-shadow: inset 0 0 0 4px blue;
}

＆＃13;

<div class="text1">Some text 1</div>
<button class="button">Button</button>
<div class="text2">Some text 2</div>

＆＃13;

按钮边框的内部厚度

1 个答案: