html5 2段組で行頭を揃える方法

2段組で左右2つの段落の頭を揃えたいのですが、上手く行きません。

floatを利用して2段組のレイアウトを作っています。
（親）
.main__inner:after {
clear : both;
content : "";
display : block;
}
（子）
.main__inner--left {
float : left;
width : 47%;
}
（子）
.main__inner--right {
float : right;
width : 47%;
}

右側の段落のはじめの部分を左側のタイトル<h3>に高さを揃えるたいのですが、右段落の上に空間を入れる方法が分かりません。
「<br><br><br><br>」とすれば表面上体裁は整います。
でも、本来あるべき文法ではないのでこの方法はあまり使いたくありません。

ちなみに右段落も<h3>で始まる場合は<h3>にクラスを作ってCSSで
調整すれば上手く行くのですが<p>だとそのやりかたが反映されないのです。
(CSS)
.space-top--4em {
margin-top:4em;
}

よろしくお願い致します。

No.1 ベストアンサー 回答者： naokita 回答日時： 2017/09/30 01:44

.main__inner--left h3{margin:0; padding:0; height:36px; line-height:36px;}

.main__inner--right { padding-top:36px;
float : right;
width : 47%;
}

上記の数値（例で 36px にして合わせているだけですので）を変更しながら、微調整しましょう。

高さの計算できますか？？
margin　padding　height　の合計値で合わせるだけです。
hxやpには、元々のデフォルト値もあるので、全て0でリセットすればわかりやすいかも。
marginとpaddingは必ず利用するので、完璧に覚えた方が良いです。
組み合わせ次第で、複数の方法が頭に浮かんでくる（応用できる）ようになるので、ベストな方法が選択できるようになります。


CSSが重複しないように、詳細度（優先度）がありますので、
他で優先していれば、CSSが効かない場合もあります。

この回答へのお礼

アドバイスありがとうございます。
計算方法についてはよく分からなかったので、試行錯誤の末なんとか我流で解決出来ました。

お礼日時：2017/10/09 17:51