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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

4回答

2040閲覧

つけた覚えのないPaddingが付いている

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2019/08/11 04:15

編集2019/08/11 04:18

サイトを作っていたところ、つけた覚えのないpaddingが付いていました。CSSの方ではそのような記述はしていません。自分では消すことができなかったので、消す方法を教えていただきたいです。

赤線のところにpadding-top: 100px;と書いてある
イメージ説明

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <link rel="icon" sizes="512x512" href="./img/icon-512x512.png"> 9 <link rel="stylesheet" href="./css/eng_index.css"> 10 <script src="./js/eng_index.js"></script> 11 <title>HOGEHOGE</title> 12</head> 13 14<body> 15 <header> 16 <div id="nav-top"> 17 <img src="./img/logo1.png" alt="hoge"> 18 </div> 19 <nav id="nav-main"> 20 <ul> 21 <li>Home</li> 22 <li>Products</li> 23 <li>About us</li> 24 <li>Contact us</li> 25 </ul> 26 </nav> 27 </header> 28 <footer></footer> 29</body> 30 31</html>

CSS

1@charset "UTF-8"; 2 3body { 4 background-color: #fafdff; 5} 6 7header { 8 background-color: #fafdff; 9} 10 11#nav-top { 12 padding: none; 13} 14 15#nav-main ul li { 16 margin-right: 10px; 17 display: inline-block; 18 width: 200px; 19 height: 100px; 20}

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

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

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

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

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

yoshinavi

2019/08/11 04:43

提示のコードと画像とでは、CSSプロパティ自体が違っています。 回答にもありますが、適用されているCSSを確認してみてください。 例えば、提示のコードの該当箇所に、背景色を付けて適用されるかどうかでも、目安になります。
yoshinavi

2019/08/11 04:51

解決されていますが、同様の問題で悩んでいる方へのヒントにもなるので、解決までの経緯を提示されると、より良いかと思います。
退会済みユーザー

退会済みユーザー

2019/08/11 04:57

解決手順を書いていたところなので、少し待っていただけるとありがたいです。
yoshinavi

2019/08/11 04:59

慌てさせてスミマセン。
退会済みユーザー

退会済みユーザー

2019/08/11 05:09

いえいえ。
guest

回答4

0

ベストアンサー

つけた覚えのないpaddingが付いていました。CSSの方ではそのような記述はしていません。

付けた覚えがなくても、Developer Tools が表示している以上は、書いてあるはずなので、

![Developper Tools->Stylesプロパティ]

[Styles] タブの下記場所において、

CSS

1#nav-top { 2 margin: auto; 3 padding-top: 100px; 4}

下記手順でCSSの記述を確認して下さい(Google Chromeの場合です。他ブラウザなら、適宜方法を確認して下さい)。

  1. [Styles] タブの "eng_index.css:11" の部分を右クリック
  2. [Open in new Tab] で eng_index.css を開く
  3. 11行目の定義を確認する

Re: Harumaro さん

投稿2019/08/11 04:31

編集2019/08/11 04:43
think49

総合スコア18156

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

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

退会済みユーザー

退会済みユーザー

2019/08/11 05:07

丁寧なご回答ありがとうございます。ベストアンサーにさせていただきます。 原因としては、ファイルがGoogleDrive上にあったため、同期が上手くいっていませんでした。 ローカルとサーバー側でファイルの内容がそもそも違ったようです。
退会済みユーザー

退会済みユーザー

2019/08/11 05:08

他の方々もご回答ありがとうございました。高評価を押させていただきました。
guest

0

こういうのって、だいたい勘違い(思い込み)じゃないですかね?

・そもそも上書き保存できていなかった。
(Visual Studio Codeみたいなのが悪さしてるとか)
・別のフォルダにある同名のファイルを編集している。
・ローカルのファイルは上書きしたけど、FTP等でサーバにアップロードしていないので、修正した気になっているだけ。
・FTP等でアップロードした先が[~/]とかで、公開フォルダにコピーしていない。
・コピーするときに権限がたりずエラーになっているけど見逃している。
・ブラウザのキャッシュを使っている(Ctrl + F5とかをしていない)

投稿2019/08/11 04:44

FiroProchainezo

総合スコア2387

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

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

0

本当に質問にあるHTMLとCSSだけなら
#nav-toppadding-top: 100px;があることは絶対にないです。
単純にHarumaroさんが読み込んでいるCSSファイルを勘違いされているだけです。
(アップロードしているCSSではなくローカルのCSSファイルを見ている、キャッシュを読み込んでいるなど)

投稿2019/08/11 04:24

yasutomi

総合スコア2937

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

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

0

css

1#nav-top { 2 padding: 0; 3}

で解決しませんか?

投稿2019/08/11 04:24

s.m_1

総合スコア293

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問