Как добавить пространство между границей и объектом внутри границы

Question

У меня есть виджет, созданный с использованием HTML и CSS, который выглядит нормально, но я не могу добавить пространство между внутренней линией Objects & Border. Может кто-нибудь, пожалуйста, помогите мне в этом.

.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>

Вот мой вывод в настоящее время

Предварительный просмотр

Answer 1

Добавьте класс CSS в ваш div, который нужно дополнить

.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>

Answer 2

Вы можете использовать заполнение, как это

.input-group{ padding: 10px;}