CSS unwanted empty <p>'s around audio element

[atomicrooster]

Some box-shadow and padding to make text more readable

p {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 1% 2% 3% 2%;
  border-radius: 5px;
}

But the padding results in making visible empty p’s before and after any audio elements.

Any suggestions? Many thanks