Question

<span class="border-bottom border-danger"> </span>

我希望此边框具有边距或填充，因为在代码中将其用于裁剪图像。我将如何去做？我知道有保证金代码，但似乎无法正常工作。

Answer 1

您可以像这样向border-bottom{ margin:auto; padding:10px; border-bottom:1px solid black; }添加填充和边距：

.border-bottom{
  margin:auto;
  padding:10px;
  border-bottom:1px solid black;
}

结果：

<span class="bottom-border border-danger">Hello World!</span>

.border-bottom{
  width:50%;
  margin:auto;
  padding:10px;
  border-bottom:1px solid black;
}

边距是一件很有趣的事情，因为您可以像这样将它们对准中心：

<span class="border-bottom border-danger">Hello World!</span>

ary.diagonal()

Answer 2

如果我们可以将margin添加到span元素，则应该添加display:block或display:inline-block;。

边距属性指定框的边距区域的宽度。 'margin'速记属性设置所有四个边的边距，而其他边距属性仅设置它们各自的边。这些属性适用于所有元素，但垂直边距对未替换的内联元素不会有任何影响。

我将引导程序边距添加为m-2，将填充边距添加为p-2，还添加了d-inline-block

有关bootstrap spacing的更多信息：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<span class="border-bottom border-danger p-4 m-2 d-inline-block">This is Span</span>

如何为边框添加边距或填充？

2 个答案: