displayの値でinline-blockとblockの駆使の仕方。

Question

display ```ｃｓｓ
コード
.recruit h3 {
padding-top: 18px;
border: 3px inset gray;
display: block;
padding: 3px;
background-color: rgba(249, 237, 228, 0.5);
}

.recruit h4 {
margin: 1px 0px;
border-bottom: 1px solid dodgerblue;
display: inline-block;
padding-right: 3px;

}

displayの値が別になっているのは、ｈ３とｈ４を横並びにしたくないためだが、
それぞれのborderでの指示は文字の範囲だけにしたい。

inline-blockを使えば、borderの範囲は文字の範囲になるが、共にinline-blockを使ってしまうと、ｈ３とｈ４が横並びになってしまいます。

どのように解消すればよいのでしょうか。

お願いします。

Answer 1

h3とh4をそれぞれdivで囲うとか、<br>を挟むとかでは駄目なんでしょうか？

Comments

[RT2]

ありがとうございます！何故それで解消されるのか勉強します。。。