CSS ボックスらをクラスでまとめても適用されない

Question

初歩の初歩の質問で恐縮です。

coloursクラス　「lightblue」「sakura」「ivory」

marginを使って、この３つのボックスを並べたいのですが、
このようになってしまいます。

原因はなんでしょうか。

宜しくお願い致します。

   <p class="colours">
		<div class="lightblue">lightblue
		</div>
	
		<div class="sakura">sakura
		</div>
	
		<div class="ivory">ivory
		</div>
	
	</p>

p.colours {
    position: relative;
    margin-left : 30px; 
    margin-top: 30px;
    padding : 60px;  
    width: 100px;
    height: 100px;
    float: left;
    text-align: center;
}

.lightblue  {
    background-color : #d3fff8 ;
}

.sakura  {
    background-color : #f7d5f1a4 ;
}

.ivory  {
    background-color : #fdfcf2e5 ;
}

Comments

[m.ts10806]

>初歩の初歩の質問で恐縮です。

この手のただし書きは不要かと思います。「初心者アイコン」つけるのでじゅうぶんです。

>この３つのボックスを並べたい

どのように並べたいのか、ゴールを明示してください

Answer 1

横並びにしたいんですかね？
floatを使うのも良いですが、横並びでしたらflexがオススメですよ〜

p.colours {
    margin-left : 30px; 
    margin-top: 30px;
    padding : 60px;  
    width: 100px;
    height: 100px;
    display: flex;
    text-align: center;
}

とすればオッケーです。
横並び以外にも色んなことがかんたんにできます。
https://qiita.com/junya/items/7762da8052d86462f232
ブラウザによっては対応していないプロパティもありますので、
Chrome、Safari、Firefox、Edgeが対応してるものを使ってください。

Comments

[sml]

ありがとうございました！助かりました。

Answer 2

coloursクラス　「lightblue」「sakura」「ivory」

marginを使って、この３つのボックスを並べたいのですが、

pタグ内にdivタグを入れるのは間違いです。
pタグは段落を表しますので、その中にブロック要素は入れられません。
詳細は下記参照。
<DIV>タグと<P>タグ

ブラウザによって自動でpの閉じタグが挿入されます。
検証ツールでみると下記のようになっているのが確認できます。

<p class="colours">
</p> /*ブラウザによって挿入*/
<div class="lightblue">lightblue
</div>
<div class="sakura">sakura
</div>
<div class="ivory">ivory
</div>
<p> /*ブラウザによって挿入*/
</p>

３つのボックスはcoloursクラスの外に出てしまってます。coloursクラスに設定したmarginは適用されません。

pタグをdivタグに変更しましょう。

<div class="colours">
  <div class="lightblue">
    lightblue
  </div>
  <div class="sakura">
    sakura
  </div>
  <div class="ivory">
    ivory
  </div>
</div>

これで、coloursクラスのブロック内に３つのボックスは入ります。

Comments

[sml]

ありがとうございました！助かりました。