pタグの要素内の上下にmarginでもなくpaddingでもない余白

Question

タイトルのとおりですが、
pタグの要素内の上下にmarginでもなくpaddingでもない余白が設定されてしまいます。

２行目からは変な余白はないのでline-heighは関係ありませんでした。

何が原因で空いてしまっているのでしょうか。

<div class="message-item-container">
  <div class="message-item">
    <p>ここにtextを入れる</p>
  </div>
</div>

.message-item-container{
 // display:flex あとからflexにしたいのでdivでくくってあるがコメントアウトしてある
}

.message-item{
  max-width: 60%;
  min-width: 20%;
  margin: 0 11px;
  padding: 15px;
  border-radius: 15px;
  word-break: break-all;
  background-color:white;
  box-shadow: 0px 3px 3px 0px black;
  p {
    white-space: pre-wrap;
  }
}

Comments

[Bernadotte]

情報がこれだけだと、判別ができません。
sampleとなるHTMLとCSSをご提示ください。

[yoshinavi]

検証しやすいようにCSSで提示されると良いかと思います。

[yoshinavi]

＞pタグの要素内の上下にmarginでもなくpaddingでもない余白が設定されてしまいます。
→　どこの部分ですか？　また、提示の画像は、提示コードのものと、違うのでは？
違わないのであれば、適用CSSはどうなっていますか？スクショを提示してください。

Answer 1

とても申し訳ないのですが、よく見たらCSSの他の部分に

[class]:after{content:''}

の記述があり、これを消したところ思い通りの表示になりました。

コードをすべて載せきらずにお時間を取らせてしまって申し訳ございませんでした。。。

Answer 2

こういうことですかね？

margin-block-start: 0em;
margin-block-end: 0em;

Answer 3

padding: 15px;

上記のように記述すると上下左右すべてにpaddingが設置されます。
試しに下記のように記述してみては如何でしょうか。

/* padding: 15px; */
padding-left: 15px;
padding-right: 15px;

Comments

[hi-se]

回答有り難うございます。
paddingをすべて０にして試してみましたが、やはり上下に少しの空白ができてしまいました。

[Bernadotte]

スタイルの初期化等はされてたりしますか？
p {
white-space: pre-wrap;
padding: 0;
}
とか試してみるのもいいかもです。

Answer 4

情報が少ないですが、text-indent でしょうか？
https://developer.mozilla.org/ja/docs/Web/CSS/text-indent

Comments

[hi-se]

回答有り難うございます。
リンク先を見てそうかな、と思ったのですがchrome dev-toolで試してみたところ変化しませんでした、、、