Сделать рамку вокруг текста в p в span в div

Question

Когда я помещаю границу вокруг элемента div или p, он слишком длинный. Если я помещу его в контейнер span, он не создаст «контейнер quadrati c» вокруг текста. Я хочу, чтобы граница была только вокруг текста. Я думаю, что не нужно больше информации. Вывод html будет бесполезным. Спасибо за помощь.

    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
    border-left:1px solid #000000;
    border-right:1px solid #000000;

<div class="tags"> <span class="icons2"> <p class="jobAreaDescription">{{jobArea}}</p> </span></div>

Answer 1

Надеюсь, этот код поможет вам !!

Вы можете использовать тег или класс 'p', это зависит от вашего проекта или сценария. Оба работают.

p{
   border:1px solid #000;
   display:inline-block;
}

<div class="tags"> <p class="jobAreaDescription">{{jobArea}}</p> </div>

Спасибо !!!

Answer 2

Вы должны указать элемент, с которым должен работать стиль. Просто свойство border должно работать с display:inline-block. Вы можете попробовать следующий способ

p.jobAreaDescription{
  border:1px solid #000000;
  display: inline-block;
}

<div class="tags"> <span class="icons2"> <p class="jobAreaDescription">{{jobArea}}</p> </span></div>

Answer 3

лучший способ сделать это с помощью следующего кода

.jobAreaDescription {
  border:1px solid #000000;
}

<div class="tags"> 
  <span class="icons2"> 
    <p class="jobAreaDescription">
       {{jobArea}}
    </p> 
  </span>
</div>

Это просто css изменение класса jobAreaDescription, поэтому не имеет значения, что оно находится внутри <div> и <span>

Answer 4

Просто используйте прокладки, может быть?

.jobAreaDescription{
   padding: 5px;
}