如何在边框和边框内的对象之间添加空间答案

【问题标题】：How to add space between border and object inside the border如何在边框和边框内的对象之间添加空间
【发布时间】：2020-01-31 13:13:16
【问题描述】：

我使用 HTML 和 CSS 创建了小部件，看起来不错，但我无法在内部对象和边框线之间添加一些空间。谁能帮我解决这个问题。

.solid { border-style: solid; }

<div class="solid">
 <div class="input-group">
  <input type="text" ng-model="c.data.message" class="form-control" aria-label="...">
  <div class="input-group-btn">
   <button type="submit" ng-click="c.add()" class="btn btn-primary">Search</button>
  </div>
 </div>
</div>

这是我目前的输出

Preview

【问题讨论】：

添加填充？ ...
“内部对象和边界线之间”是什么意思？你指的是什么元素？此外，在您的示例中，您打开了三个 div，但只关闭了一个。
您根本无法标记否定标记，这是一个错字先生。请注意，如果我的代码不正确，我绝对不应该在不关闭的情况下获得输出
@AbdulAzeez 你在向谁发表评论？我根本没有否决你的问题。但是，如果问题不清楚或问题本身包含可能影响回答的错误和误导，则完全合理地对问题投反对票。例如，我可以发布一个答案，说明您的无效 html 正在阻止应用您的填充。

标签： html css bootstrap-4

【解决方案1】：

你可以像这样使用填充

.input-group{ padding: 10px;}

【讨论】：

【解决方案2】：

在需要填充的 div 中添加一个 css 类

.solid { border-style: solid; }

.padded {
  padding: 10px
}

<div class="solid">
  <div class="input-group padded">
    <input type="text" ng-model="c.data.message" class="form-control" aria-label="...">
    <div class="input-group-btn">
      <button type="submit" ng-click="c.add()" class="btn btn-primary">Search</button>
    </div>
  </div>
</div>

【讨论】：