div要素同士の行間設定

Question

ご質問失礼します。
divタグ要素同士の行間の設定で
悩んでおります。
以下が例ににります。
A要素とB要素の間に隙間を空けたい。

<div class="mybox-1">テキストA</div> <style> .mybox{ background-color: #F6D4D8; /* 背景色 */ border-radius: 5px; margin: 20px 5px; /* 外側の余白 上下・左右 */ padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */ position: relative; z-index: 0; } .mybox:before{ border: 1px solid #fff; /* 白い実線 */ border-radius: 5px; content: ''; display: block; margin: 4px; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1; } .mybox:after{ background-color: rgba(249,223,213,0.9); /* マステ背景色 */ background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */ background-position: 0 0, 8px 8px; /* 水玉の距離 */ background-size: 15px 15px; /* 水玉の大きさ */ border-left: 2px dotted rgba(0,0,0,0.1); border-right: 2px dotted rgba(0,0,0,0.1); box-shadow: 0 0 5px rgba(0,0,0,0.2); content: 'テキスト'; display: block; padding: 5px 20px; text-align: center; position: absolute; top: -10px; left: 20px; transform: rotate(-3deg); -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); -o-transform: rotate(-3deg); } </style> <div class="mybox-2">テキストB</div> <style> .mybox{ background-color: #F6D4D8; /* 背景色 */ border-radius: 5px; margin: 20px 5px; /* 外側の余白 上下・左右 */ padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */ position: relative; z-index: 0; } .mybox:before{ border: 1px solid #fff; /* 白い実線 */ border-radius: 5px; content: ''; display: block; margin: 4px; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1; } .mybox:after{ background-color: rgba(249,223,213,0.9); /* マステ背景色 */ background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */ background-position: 0 0, 8px 8px; /* 水玉の距離 */ background-size: 15px 15px; /* 水玉の大きさ */ border-left: 2px dotted rgba(0,0,0,0.1); border-right: 2px dotted rgba(0,0,0,0.1); box-shadow: 0 0 5px rgba(0,0,0,0.2); content: 'テキスト'; display: block; padding: 5px 20px; text-align: center; position: absolute; top: -10px; left: 20px; transform: rotate(-3deg); -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); -o-transform: rotate(-3deg); } </style>

実行
.mybox-1 {
.mybox-2　{
margin-bottom: 40px;
}
}
色々試し
よろしくお願いいたします。

Answer 1

ご質問の意図が汲めていないかもしれませんが、単に下記のように下方向のマージンを設定すれば行間はとりあえず空くと思います。

<style>
  .mybox-1 {
    margin-bottom: 40px;
  } 
</style>

こういう意味では無ければお伝えください。
よろしくお願いします。

Comments

[Kakakaff1150253]

ご返信ありがとうございます。
出来ました。
一つ質問ですが、単位はpxでよろしいですか？
remもあるみたいですが。

[marasonPD]

単位はpxやrem以外にも沢山ありますね。
何を使うべきかは目的によって違うので、ここでは何とも言えません。
ただ、質問者さんはまだ慣れていないようなので、直感的でわかりやすいpxを使っておいて、
必要に応じて他の単位を使っていく感じで考えていくのが良いのかなと思います。

[Kakakaff1150253]

そうなんですね
丁寧教えて頂き
ありがとうございます。