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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2327閲覧

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

reo_fukkase

総合スコア50

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/02/08 15:04

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

下記のように 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 }

投稿2020/02/08 16:31

編集2020/02/08 16:38
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

reo_fukkase

2020/02/09 01:07

できました、ありがとうございます。 今度からここに詰まったときは、このやり方でやってみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問