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

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

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

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

CSS

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

Q&A

解決済

1回答

269閲覧

画像の下の余白はどこから?

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/12/05 14:27

div#top 1145px 760px
img .top2 1145px 756px

この4pxはどこから来ているのか知りたいです。
よろしくお願いします。

html

1<div id="top"> 2 3<img src="img/back.jpg"class="top2"/> 4 5<div class="top3"> 6<h1><img src="img/logo.png" alt=""/></h1> 7</div><!----top3----> 8 9 10<nav> 11<ul class="list-nav"> 12 <li><a href="#top">Top</a></li> 13 <li><a href="#concept">Concept</a></li> 14 <li><a href="#product">product</a></li> 15 <li><a href="#contact">contact</a></li> 16</ul> 17</nav> 18</div><!---top--->

css

1body,h1,h2,h3,li,ul,img,p,div,dd,dt{ 2 padding: 0; 3 margin: 0; 4} 5 6li{ 7 list-style-type: none; 8} 9 10.wrapper{ 11 width: 100%; 12} 13 14.clearfix:after{ 15 content:""; 16 display:block; 17 clear:both; 18} 19 20 21/*******h1の画像********/ 22 23h1{ 24 float:left; 25} 26 27.top2{ 28 width: 100vw; 29 height: 100vh; 30} 31 32.top2{ 33 position: relative; 34} 35 36.top3{ 37 position: absolute; 38 top: 0; 39 left: 0; 40} 41 42 43 44/*navの設定*/ 45 46nav{ 47 font-size: 25px; 48} 49 50 51nav ul{/*.headerの中にあるulタグにだけ適用*/ 52 53 float: right; 54 position: absolute; 55 top:30px; 56 right: 30px; 57 background-color: #FFFFFF; 58} 59nav li{ 60 /*メニューのところなどにはwidth指定は不要*/ 61 float:left; 62 padding-right: 60px; 63 padding-top: 10px; 64 padding-bottom: 10px; 65} 66nav li:first-child{ 67 padding-left: 60px; 68}

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

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

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

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

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

guest

回答1

0

ベストアンサー

img要素はそのままではinline-blockとしてグラフィックの下端がテキストの基底線(文字揃えの基準)に揃えられます. ここで通常テキストの基底線はテキストグラフィックの下端よりも若干上に存在するため,img要素の下に隙間があるように見えてしまいます. これこそが「この4px」であると考えられます.

この隙間をなくすには, vertical-alignプロパティを用いてグラフィックの下端がテキストグラフィックの下端に揃えられるようにスタイルを指定します.

CSS

1img{ 2 vertical-align:bottom; 3}

投稿2017/12/05 14:55

defghi1977

総合スコア4756

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問