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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

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

CSS

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

Q&A

解決済

3回答

1851閲覧

css 上の余白に関して

Susanoo2442

総合スコア153

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/06/07 14:05

今、サンプルページをCSSで制作しているのですが
ページ上の余白がどうあがいても消すことが出来ません。

結構調べましたが
原因となるものが特定できません。

詳しい方ご教示お願い致します。

以下、コードです。

HTML

1 2 3<!DOCTYPE html> 4<html lang="ja"> 5 <head> 6 <meta charset="utf8"> 7 <title>sample</title> 8 </head> 9 <body> 10 <header> 11 <h1 class="nume2">BECAME GAMERS</h1> 12 HoMe 13 MeNu 14 お問い合わせ 15 </header> 16 <section> 17 <h1>話題の超人気ゲームのマニアックな最新情報をいち早くお届け!</h1> 18 <h2>カテゴリ</h2> 19 </seciton> 20 <section> 21 <h1>ACTION</h1> 22 <p>ナルティメットストーム 4</p> 23 <h1>RPG</h1> 24 <p>DARK SOULS III</p> 25 <h1>FPS</h1> 26 <p>FAR CRY PRIMLE</p> 27 <h1>RACE</h1> 28 <p>NEED FOR SPEED UNDER COVER 2</p> 29 </section> 30 </body> 31</html> 32

CSS

1 <style> 2 html{ 3 margin:0; 4 } 5 body{ 6 text-align:center; 7 margin:0; 8 } 9 header{ 10 text-align:left; 11 margin:0; 12 } 13 h1{ 14 margin:0; 15 } 16 .nume2{ 17 margin:0; 18 background-color:black; 19 color:white; 20 width:100%; 21 height:150px; 22 } 23 </style> 24

それでは、宜しくお願い致します。

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

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

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

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

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

guest

回答3

0

[BECAME GAMERS]の余白でしたline-heightを指定していないのが原因じゃないでしょうか?
line-heightに1またはfont-sizeを指定するならそのサイズを入れるとか。

.nume2{ margin:0; background-color:black; color:white; width:100%; line-height: 1; height:150px; }

投稿2016/06/07 15:02

kchiku

総合スコア146

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

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

0

ベストアンサー

[BECAME GAMERS] の上と左のすきま、ということでしょうか。それであれば無理やりマイナスmarginを設定する感じで出来るとは思います。フォントによって上下左右に空間が有るので、フォントが変われば隙間の大きさも変わります。

CSS

1.nume2 { 2 font-family: arial; 3 margin: -0.21em 0 0 -0.06em; 4 padding-right: 0.06em; 5}

投稿2016/06/07 14:49

kei344

総合スコア69364

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

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

Susanoo2442

2016/06/07 15:00

出来るだけ marignのマイナスによる めり込み作戦は使いたくありませんでしたが。。。 なにを試してみても 治らないため仕方なく使うことにしました。 回答ありがとうございました!
guest

0

余白というのは、[BECAME GAMERS]の余白のことでしょうか?
もし、そうなら.num2のクラスで高さ指定をされていらっしゃるので、
そこで余白が出来ているように、見えます。

投稿2016/06/07 14:35

snowdog

総合スコア50

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

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

Susanoo2442

2016/06/07 15:01

マージンめり込み作戦で 回避しました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問