inline-blockなのにmargin上下が効かないのは他に原因がありますか？

header-leftのpを上に動かしたいです。試したこと→paddingでやってみたがだめでした。左右はできました。検証でみてみたところ、例えば、margin-bottomとすると、下に空白ができるだけで、文字自体は動きませんでした。

HTML
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<title>iSara[イサラ] | バンコクのノマドエンジニア育成講座</title>
6		<link rel="stylesheet" href="css/iSara.css">
7	</head>
8	<body>
9		<header>
10			<div class="header-left">
11				<img src="image/isaralogo.png">
12				<p>バンコクのノマドエンジニア育成講座</p>
13			</div>	
14			<div class="header-right">
15				<a href="">お問い合わせ / 資料請求はこちら</a>
16			</div>
17				
18			</div>
19		</header>
20		<div class="title">
21			<div class="title-top">
22				
23			</div>
24			
25		</div>
26	</body>
27</html>

scss
1@charset "utf-8";
2*{
3    margin:0;
4    padding:0;
5}
6body{
7	width:1425px;
8	font-family:"�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", ���C���I, Meiryo, Osaka, "�l�r �o�S�V�b�N", "MS PGothic", sans-serif;
9}
10header{
11	height:75px;
12	background-color:white;
13	.header-left{
14		float:left;
15
16		img{
17		height:45px;
18		margin-top: 14px;
19		margin-left:127px;
20		}
21		p{
22			display: inline-block;
23			font-size: 14px;
24			font-weight: 600;
25			letter-spacing: 2px;
26			
27			color:#333333;
28		}
29	}
30	.header-right{
31		float:right;
32		a{
33			display: inline-block;
34			background-color:#da6b64;
35			line-height: 22px;
36			text-decoration: none;
37			color:rgb(255, 255, 255);
38			font-size: 14px;
39			font-weight:300;
40			letter-spacing:2px;
41			border-radius: 25px;
42			padding:11px 40px;
43			margin-top: 16px;
44			margin-right:127px;
45			&:hover{
46				background-color:#d84940;
47			}
48		}
49	}
50}
51.title-top{
52	height:500px;
53	background-image:url("https://isara.life/wp-content/themes/isara_v2/img/main.jpg");
54	background-size:cover;
55}

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

回答1件

ベストアンサー

下記のように vertical-align: top; を追加すると margin-top が効きます。

css
1        p{
2            display: inline-block;
3            font-size: 14px;
4            font-weight: 600;
5            letter-spacing: 2px;
6            vertical-align: top; /*追加*/
7            margin-top: 25px;     /*追加*/
8            color:#333333;
9        }

もし、ご希望のことが、画像とテキストの垂直位置を中央揃え(上端揃え、下端揃え)にしたいのなら、Flexbox を使った方が分かり安いと思います。

css
1  .header-left{
2    float:left;
3    display: flex;
4    align-items: center; /*垂直位置中央揃え*/
5
6    img{
7      height:45px;
8      margin-left:127px;
9    }
10    p{
11      font-size: 14px;
12      font-weight: 600;
13      letter-spacing: 2px;
14      color:#333333;
15    }