回答率: 85.36%

質問するログイン新規登録

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

詳細はこちら

トップ HTML5に関する質問

Q&A

1回答

399閲覧

見出しにつけるアイコンの位置調整

総合スコア0

0グッド

0クリップ

投稿2021/02/04 14:05

0

0

前提・実現したいこと

background-imageで表示するアイコンの位置をブロックの左端より少し右の位置に移動させ、余白を入れたいです。
HTML5でアイコンがついた見出しを作成しています。background-image: url()とpadding-leftを使うと画像がブロックの端ぴったりの位置になってしまい、ブロック左端とアイコンの余白ができません。
ご教示いただきたいです、お願いします。

HTML

<body>
  <h1>アイウエオ</h1>
</body>

css

h1 {
  background-color: orange;
  color: white;
  border-radius: 10px;
  background-image: url("");
  background-size: contain;
  background-repeat: no-repeat;
  padding-left: 50px;
}

行動規範の内容に同意します

回答1件

0

background-position - CSS: カスケーディングスタイルシート | MDN

css
1h1 {
2  background-color: orange;
3  color: white;
4  border-radius: 10px;
5  background-image: url("");
6  background-size: contain;
7  background-repeat: no-repeat;
8  background-position: 10px center; /* 左から10px　上下中央 */
9  padding-left: 50px;
10}

投稿2021/02/04 19:28

総合スコア34073

2021/02/05 09:28

出来ました。本当にありがとうございました！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ HTML5に関する質問

見出しにつけるアイコンの位置調整