Как обернуть текст в фоновые поля

Question

Я пытаюсь обернуть фоновый цвет вокруг текста с помощью css, как показано на скриншоте ниже

Сейчас вот что у меня есть, но егоне дает мне то, что я действительно хочу

h2 {
  color: #fff;
  display: inline;
  background-color: #000;
}

но это то, что я получаю

Так что любой знает, что мне нужнодобавить, чтобы текст был обернут с некоторыми отступами?

Спасибо

Answer 1

Это должно помочь вам с тем, что вам нужно:

body {
  background: #ddd;
}

p {
  background: #e87;
  font-size: 26px;
  line-height: 29px;
  display: inline;
  box-shadow:0.2em 0 0 #e87,-0.2em 0 0 #e87;
  -moz-box-shadow:0.2em 0 0 #e87,-0.2em 0 0 #e87;
  -webkit-box-shadow:0.2em 0 0 #e87,-0.2em 0 0 #e87;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat?</p>

Answer 2

Вы можете использовать line-height: 100%;, чтобы избежать вертикального пробела между строками:

body {
  background: #ddd;
}

p {
  display: inline;
  line-height: 100%;
  background: #fa0;
  font-size: 40px;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>