CSSでのpadding、marginについて

Question

実現したいこと

以下の画像のようなものをhtml, cssで作りたいと考えています。
あるボックス内に今日の天気と地名を表示するようなものです。

発生している問題

CSSのmarginとpaddingの設定でつまずいています。
上記の図の通り実装したいのですが、marginとpaddingをどのように設定すればいいでしょうか。

<div id="box">
 <div id="weather">今日の天気は晴れ</div>
 <div id="place">東京</div>
</div>

#box{
 width: 130px;
 height: 37px;
 border: solid 1px #000000;
}

#weather{
 width: 50px;
 height: 5px;
}

#place{
 width: 20px;
 height: 5px;
}

Comments

[yoshinavi]

各テキストの大きさは決まっているのですか？

[Neemsk]

それぞれの大きさを記入しました。

[yoshinavi]

これでいくと文字は最大5pxの大きさ（高さ）ですが良いのでしょうか？字下げ（インデント）はいくつですか？

Answer 1

とりあえずこんな感じですか？
サンプル

Comments

[退会済みユーザー]

heightとpaddingをそれぞれ指定し、paddingを重視する場合はheightはautoでいいと思います。(書かなくてもautoになりますが...)

[Neemsk]

ありがとうございます。