ここから本文です

cssで写真の中に半透明のボックスを置き、更にその中に文字を入れたいと思います。...

アバター

ID非公開さん

2016/8/3111:39:57

cssで写真の中に半透明のボックスを置き、更にその中に文字を入れたいと思います。

配置は出来のですが、heightを指定しているのに、paddingを使用すると縦が広がってしまいます。

こちらを解決する方法はございませんでしょうか?
宜しくお願いします。


p.sample {
background-image: url("../img/背景.jpg");
height: 400px;
text-align: left;
padding:50px;
}

p.sample {
background-color: rgba( 204, 255, 204, 0.6 );
color: blue;
font-size: 100px;
}

閲覧数:
24
回答数:
2

違反報告

ベストアンサーに選ばれた回答

dig********さん

2016/8/3111:44:55

height: 400px;
padding:50px;

簡単な算数です。 400-(50+50)-文字の大きさ・マージン-<p>の高さ= 400 以上

と言う事です。

ベストアンサー以外の回答

1〜1件/1件中

jam********さん

2016/8/3111:44:34

cssのボックスモデルを勉強してください。
padding分、heightを減らしてください。

CSS3であれば、box-sizingプロパティで解釈を変更することもできます。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる