一部文字の上下padding設定について

解決済

質問者：kureakai
質問日時：2012/06/07 20:50
回答数：1件

以下ソースを作成しました。

最後にPタグ、Aタグの中身に
文字を記述しています。

・文章
ここにテスト文章段落1
<a class="ast" href="#">ここにテストリンク1</a>

両方の文章に存在するspanで囲まれている[テスト]という文字の上下paddingを設定して、
テストだけ文字位置の高さを変えたいのです20pxほど「テスト」という文字を、上または下に動かしたい。(=ずらしたい)

以下ソースを記述しましたが、
左右のpaddingは有効になったのですが、
上下paddinが有効になりません。

どのようにしたら良いのでしょうか
ご教授よろしくお願いします。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
.pst{
background-image: url("back.jpg");
padding:10px;
}

.ast{
display:block;
padding:10px;
background-image: url("back.jpg");
}

.try{
padding:10px;
}
</style>
</head>
<body>

ここにテスト文章段落1
<a class="ast" href="#">ここにテストリンク1</a>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2012/06/07 23:05

スタイルシートを期待通り適用させるためには、HTMLが正当でないと。

a要素は行内要素ですから、body直下には置けません。(エラーにはなりませんが、divなどの直下にも置くべきではない--匿名ボックスが生成されます)

ここにテスト文章段落1
<a href="#">ここにテストリンク1</a>

でよいかと。

p.pst,p.ast{line-height:40px;margin:0 10px;background-image:url(back.jpg);}
p.pst span,p.ast span{position:relative;top:-10px;}