Q&A
回答ありがとうございます。記述してみましたが、h1とpの部分が重なってしまったので、こちらであとは考えて修正していきます。
###前提・実現したいこと
containerクラスの文字を上部分に移動して、高さを調節したい
ここに質問の内容を詳しく書いてください。
webサイトを作成しています。<h1><p>タグ記載の文字をもう少し上に移動させたいのですがなかなかうまくいきません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>お寿司屋さん</title> 6<link rel="stylesheet" href="stylesheet.css"> 7</head> 8<body> 9 <header> 10 <div class="logo">推し寿司</div> 11 <div class="btnarea"> 12 <a href="#" class="login">ログイン</a> 13 </div> 14 </div> 15</header> 16 <div class="top-wrapper"> 17 18 <div class="container"> 19 <h1>新商品続々登場</h1> 20 <p>おいしいお寿司をお腹いっぱい食べて欲しい。</p> 21 <p>そんな想いを込めて、</p> 22 <p>推し寿司は新しく生まれ変わりました。</p> 23 24 25 </div> 26 27 </div> 28 29 30 31 32</body> 33</html>
CSS
1header{ 2 background-color: red; 3 height: 65px ; 4 5} 6.logo{ 7 color: #f0f8ff; 8 float: left; 9 margin:20px; 10 font-size: 20px; 11 font-weight: bold; 12} 13 14.btnarea{ 15 float:right; 16} 17 18 19.btnarea a{ 20 display:block; 21 text-align: center; 22 line-height:65px; 23 margin-right: 20px; 24} 25 26.top-wrapper{ 27 padding: 180px 0 100px 0; 28 background-image: url(https://media.istockphoto.com/photos/composition-with-delicious-sushi-rolls-japanese-food-picture-id1218016941); 29 background-size: cover; 30 31} 32.container{ 33 text-align: center; 34 35} 36.container p{ 37 font-weight: bold; 38}
試したこと
縦の列を調節すればよいと考え、.containerの部分にvertical-align:120px;で調節すれば、
新商品続々登場
おいしいお寿司をお腹いっぱい食べて欲しい。
そんな想いを込めて、
推し寿司は新しく生まれ変わりました。
上位の部分が上に移動してくれるかと思ったのですが、何も変化がありませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
既に回答はされているようなので参考URLを
marginやpaddingがなんであるかを理解していないのでこういう所で詰まってしまってるんだと思います。
margin - CSS: カスケーディングスタイルシート | MDN
padding - CSS: カスケーディングスタイルシート | MDN
上記はMDNのmargin、paddingのリファレンスです。
これだけだとわかりにくいと思いますので分かりやすい記事も下記に載せておきます。
CSSのmarginとは？paddingとは？余白の指定方法まとめ
ここでmarginやpaddingがどのように作用するか図示されているので一度見てみることをおすすめします。
投稿2021/04/13 04:59
総合スコア1282
0
とりあえず、マージンを消してみてはどうでしょうか。
css
1.container h1, .container p{ 2 margin: 0; 3}
さらに近づけたい、ということでしたら、マージンをマイナスにするのもいいかもしれません。
css
1.container h1{ 2 margin: -30px; 3}
投稿2021/04/13 04:50
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/13 05:38
2021/04/13 05:54