containerクラスの文字を上部分にずらしたい

###前提・実現したいこと
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件

ベストアンサー

既に回答はされているようなので参考URLを

marginやpaddingがなんであるかを理解していないのでこういう所で詰まってしまってるんだと思います。

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

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

上記はMDNのmargin、paddingのリファレンスです。

これだけだとわかりにくいと思いますので分かりやすい記事も下記に載せておきます。

CSSのmarginとは？paddingとは？余白の指定方法まとめ
ここでmarginやpaddingがどのように作用するか図示されているので一度見てみることをおすすめします。

投稿2021/04/13 04:59

K_3578

総合スコア1282

HdNu

2021/04/13 05:38

回答いただきありがとうございます。確かにぼんやりとしか理解していない部分がありましたので目を通してみようと思います。

K_3578

2021/04/13 05:54

理解できていないものを使うのは大変危険なのでしっかり理解してからお使いになってください。以下、余談です。これを読んでもインプットはされますが、アウトプットは出来ませんので同様な問題で困っている人はよくteratailで質問として挙がってくるので暇があるなら回答してみてはどうでしょうか。理解していない人に説明する事はしっかり自分が理解していないと難しいものです。それが出来れば理解出来ているといっても過言ではないでしょう。

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

とりあえず、マージンを消してみてはどうでしょうか。

css
1.container h1, .container p{
2  margin: 0;
3}

さらに近づけたい、ということでしたら、マージンをマイナスにするのもいいかもしれません。

css
1.container h1{
2  margin: -30px;
3}

投稿2021/04/13 04:50

Lhankor_Mhy

総合スコア36158

HdNu

2021/04/13 05:43

回答ありがとうございます。記述してみましたが、h1とpの部分が重なってしまったので、こちらであとは考えて修正していきます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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