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

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

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

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

CSS

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

Q&A

解決済

1回答

2617閲覧

微妙な隙間をなくすには。。。

TomofumiKimura

総合スコア65

HTML5

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

CSS

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

0グッド

0クリップ

投稿2017/04/02 03:03

イメージ説明

このイメージと全く同じサイトを作らなくればいけないのですが、今の自分のサイトは微妙に一番下のparagraph と外枠の間が完全に20pxではないと思うのですが、どうなんでしょうか??あとh3 のBase Ingredients とIcing Ingredients の奴も微妙に間が完全に20pxではないと推測しているのですが。。google chrome のinspect で確認したのですが、どうも少しだけ間があると考えられるのですが、どうなんでしょうか?

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel = "stylesheet" type = "text/css" href = "receipe2_style.css"> 6 <title>recipe2</title> 7 </head> 8 <body> 9 <h1>Recipe #1</h1> 10 <div> 11 <h2>Chocolate Rough</h2> 12 13 14 15 16 <!-- Division The <div> tag defines a division or a section in an HTML document. 17 The <div> tag is used to group block-elements to format them with CSS.--> 18 <figure><!-- image part division --> 19 <img src = "chocRough.jpg"> 20 </figure> 21 22<!-- "Base" Ingredients part division --> 23 <section> 24 <h3>Base Ingredients:</h3> 25 <ul> 26 <li>110g butter</li> 27 <li>1 cup sugar</li> 28 <li>2 tsp cocoa</li> 29 <li>2&frac12; tsp golden syrup</li> 30 <li>1 cup flour</li> 31 <li>1 tsp baking powder</li> 32 <li>&frac34; cup coconut</li> 33 </ul> 34 </section> 35 36<!-- "Icing Ingredients part" --> 37 <section id= "Icing"> 38 <h3>Icing Ingredients:</h3> 39 <ul> 40 <li>1 cup icing sugar</li> 41 <li>25g melted butter</li> 42 <li>2 tsp cocoa</li> 43 <li>&frac34; tsp golden syrup</li> 44 <li>A little water to <br>combine</li> 45 </ul> 46 </section> 47 48 <p>Cream butter and sugar together. Add golden syrup. Add sifted cocoa, flour and baking powder. Add coconut. Combine and press into a shallow tin. Bake at 180&deg;c for 20 - 30 minutes. Ice while still warm. 49 </p> 50 <p>To make icing: sift icing sugar and cocoa together, stir through coconut and then add butter and enough water to mix to a stiff paste. 51 </p> 52 53 </div> 54 </body> 55</html>

CSS

1html{ 2background-color:rgb(235, 255, 249); 3} 4 5body{ 6 font-family: "Arial" , Verdana, sans-serif; 7 8 color:#4ca68d; 9} 10 11/* Main heading */ 12h1{ 13 text-align:center; 14 font-family: "Times New", Times, serif; 15 16} 17/* Chocolate Rough*/ 18h2{ 19 margin:0px auto; 20 position:relative; 21 22 top:-50px; 23 left:-13px; 24 margin-bottom:-25px; 25 26 font-family: "Times New", Times, serif; 27 } 28 29h3{ 30 31 margin:0px; 32 33 font-family: "Times New", Times, serif; 34} 35/* Inside part */ 36div{ 37 background-color:#fff9eb; 38 margin:20px auto; 39 padding:20px 15px 20px 15px; 40 border:none; 41 width:670px; 42 height:320px; 43} 44 45 46/* chocolate image */ 47figure{ 48 float:left; 49 margin:0px; 50 width:223px; 51 52 53 54 55} 56 57figure+section{ 58 border-right:1px solid; 59 60 61 62 63} 64 65/* Base_Ingredients */ 66section{ 67 width:223px; 68 float:left; 69} 70#Icing h3{ 71 margin-left:30px; 72} 73#Icing ul{ 74 75 margin-left:75px; 76} 77section ul{ 78 79 margin-bottom:0px; 80 margin-top:0px; 81 margin-left:43px; 82 padding-left:0px; 83 84 85} 86section ul li{ 87 text-indent:-4px; 88} 89 90 91 92p{ 93 text-align: justify; 94 text-justify:inter-word; 95 clear:left; 96 margin-top:0px; 97 margin-bottom:0px; 98 padding-top:20px; 99 100 101} 102 103 104 105

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

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

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

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

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

toutou

2017/04/02 04:21

それではないと推測があるのならば、まずそれを試してはいかがでしょうか。まったく同じというのならば、これ自体に間違いがないか聞いてみてもいい。
ku__ra__ge

2017/04/02 05:11

「どうなんでしょうか?」と言われても「ああ、はい。そうなってますね」としか答えられません。どのような回答が欲しいか書いてください。
TomofumiKimura

2017/04/02 08:27

それではないと推測があるのならば、まずそれを試してはいかがでしょうかとはどうゆう意味なのでしょうか??。
TomofumiKimura

2017/04/02 08:28

その間が20pxであるかどうか どうなんでしょうかという意味で言いましたので、20pxになっているかどうかとどうしてなっていないのかを答えられんじゃないでしょうか?
guest

回答1

0

ベストアンサー

一番下のparagraph と外枠の間が20pxではない

divの高さが320pxに固定されていることが原因です。
高さが指定されるとdivの内容がその高さに満たない場合には下部に空白が発生します。
下部空白のうち、20pxを超える分はこの空白です。

h3 のBase Ingredients とIcing Ingredients の奴も微妙に間が完全に20pxではないと推測している

h2要素が原因です。
「h2要素が本来存在する位置に発生するスペース」をmargin-bottom:-25px;で調整しているようですが、この指定だとそのスペースが僅かに残るようです。
上部空白のうち、20pxを超える分はこの空白です。

margin-bottom:-20px;margin-bottom:-30pxを指定して、それぞれどのような表示になるかを確認すると状況が理解できるかと思います。

投稿2017/04/02 05:05

編集2017/04/02 05:12
ku__ra__ge

総合スコア4524

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問