inline-blockにしなければいけない理由

Question

Progate 中級編においての質問です。
HTML

<div class="lesson"> <div class="lesson-logo"> <img src="https://prog-8.com/images/html/advanced/html.png" alt="" /> <p>HTML & CSS</p> </div> <p class="txt-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>

CSS

.txt-contents{
width:80%;
font-size:13px;
color:#b3aeb5;
display:inline-block;
margin-top:20px;

この部分のdisplay をinline-blockにしないと
txt-contentsの部分の部分が左にが左にずれてしまうずれてしまうのですが、何故inline-block にしなければにしなければならないかがわかりません
お願い致します。

Comments

[Stgl--1127]

サンプルコードは「```」で囲うようにしましょう。そのほうが見やすくなります。

Answer 1

綺麗に整形してみました
下記のコードだけだとblockでもinline-blockでも表示は何一つ変わらないので、やはり他のコードも必要かなと思います。
インライン要素をブロック要素で調べてみると理解が深まるかもしれませんよ。

 <div class="lesson-logo">
     <img src="https://prog-8.com/images/html/advanced/html.png" alt="" />
     <p>HTML & CSS</p> 
</div> 
<p class="txt-contents">
     ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。
</p>

.txt-contents {
 width:80%;
 font-size:13px;
 color:#b3aeb5;
 display:inline-block;
 margin-top:20px;
}

Answer 2

全体のコードをお示しいただけていないので、想像での回答になりますが。

.lesson-wrapper {
	text-align: center;
}

となっているからだと思います。

text-align: centerとすると、内部のテキストがセンタリングされます。
一方で、display:inline-blockとすると、テキストとして扱われるようになります。
ですので、display:inline-blockを外すと、テキストとして扱われなくなり、そのためにセンタリングされなくなる、ということかと思います。