ｃｓｓ ブログタイトル位置の動かし方

質問

gooブログのカスタムテンプレート「カスタムブルー」を使っています。

cssでブログTOP画像をいじっているのですが、
背景画像を挿入した際に、元々組み込まれている自身のブログタイトル、
およびブログの説明文が挿入した画像の隠れて欲しくない部分と
重なってしまいます。
左右への移動は　「paddinng-left」にて出来たのですが
上下への移動が出来ず（paddinng-top or bottomでは動かず)困っています。
（ブログタイトル＆説明文をもう少し上の位置にずらしたいのですが。。）

位置の設定の仕方が間違ってる、もしくは何か別の方法があるのでしょうか？
----------------------------------------------------------------
/* ブログのタイトル部上 */
.headerLight {
background-image: url(挿入画像のurl);
background-repeat: no-repeat;
background-position: center;
background-color: #D8BFD8;
height: 300px;
}

/* ブログタイトル部等の区切り線 */
.rule {
background-color: #7B68EE;
border-color: #ffffff;
border-style: dotted;
border-width: 3px;
}

/* ブログのタイトル部下 */
.headerDark {
background-image: url();
background-repeat: ;
background-position: ;
background-color: #D8BFD8;
}

/* ブログのタイトル */
.bTitle {
color: FFF0F5;
font-size: 22px;
font-weight: bold;
font-family: 'Century Gothic',VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS P ゴシック',Osaka;
padding-left: 70px;

}

/* ブログタイトルのリンク（<a href="#" class="etTitleLink">で使用） */
.bTitleLink {
text-decoration: none;
}

/* ブログの概要 */
.bDesc {
color: #ffffff;
font-size: 12px;
font-weight: bold;
padding-left: 100px;
}
---------------------------------------------------------------
※ＣＳＳ初心者です。
　よろしくお願いいたします。

回答No.1

Erorin · ベストアンサー

padding: 上 右 下 左;
または
margin: 上 右 下 左;
（すべて半角かつ、カンマは入れない）
paddingは、ある枠内でスペースをとるときに、
marginは、枠外にスペースをとるときに使用します。
position属性で一を動かすというのも手ですね。

http://www.w3schools.com/Css/pr_class_position.asp

お礼

さっそくのご回答を頂いたのに返事が遅れて申しわけありません

paddingプロパティを使って

　paddinng: ○px ○px ○px ○px;

　空けたいスペースの値を色々変えてみましたが、
　なぜか左右は移動するのに、上下は指定のスペース通りに動いてくれません(汗）
　position属性は使った事がなかったので、教えて頂いたサイトおよび
　他サイトを見つつやってみましたが、上手くいきませんでした
　もう少しいろいろ試してみたいと思います。

回答No.2

Erorin

#1です。
誤変換の訂正および追記です。

　訂正
position属性で「位置」を動かすというのも手ですね。

　追記
位置や空白の数値設定はマイナスの数字や小数も設定できます。
これによって解決が可能かもしれません。

お礼

訂正・追記ありがとうございます<(_ _)>

追記のマイナスの設定が出来るとは知りませんでした。
もう少しCSSを勉強しないといろいろいじるのは難しいですね

教えて頂いた事を参考にもう少し頑張ってみます。

補足

出来ました！

paddingを挿入する場所が間違っていたようです
/* ブログのタイトル */
.bTitle {
color: FFF0F5;
font-size: 22px;
font-weight: bold;
font-family: 'Century Gothic',VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS P ゴシック',Osaka;

ではなく、
/* ブログのタイトル部上 */
.headerLight {
background-image: url(挿入画像のurl);
background-repeat: no-repeat;
background-position: center;
background-color: #D8BFD8;
height: 300px;
}
↑こちらにpaddingを設定することで解決しました(^^ゞ
やはり初心者、これからもっと勉強いたします。

ご回答に感謝しています。