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

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

ただいまの
回答率

90.52%

  • CSS

    5759questions

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

  • HTML5

    4001questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 526

TomofumiKimura

score 15

イメージ説明

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel = "stylesheet" type = "text/css" href = "receipe2_style.css">
        <title>recipe2</title>
    </head>
    <body>
        <h1>Recipe #1</h1>
        <div>
            <h2>Chocolate Rough</h2>




    <!-- Division The <div> tag defines a division or a section in an HTML document.
    The <div> tag is used to group block-elements to format them with CSS.-->
            <figure><!-- image part division -->
                <img src = "chocRough.jpg">
            </figure>

<!-- "Base" Ingredients part division -->
            <section>
                <h3>Base Ingredients:</h3>
                <ul>
                    <li>110g butter</li>
                    <li>1 cup sugar</li>
                    <li>2 tsp cocoa</li>
                    <li>2&frac12; tsp golden syrup</li>
                    <li>1 cup flour</li>
                    <li>1 tsp baking powder</li>
                    <li>&frac34; cup coconut</li>
                </ul>
            </section>

<!-- "Icing Ingredients part" -->
            <section id= "Icing">
                <h3>Icing Ingredients:</h3>
                <ul>
                    <li>1 cup icing sugar</li>
                    <li>25g melted butter</li>
                    <li>2 tsp cocoa</li>
                    <li>&frac34; tsp golden syrup</li>
                    <li>A little water to <br>combine</li>
                </ul>
            </section>

                <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.
                </p>
                <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.
                </p>

        </div>
    </body>
</html>
html{
background-color:rgb(235, 255, 249);
}

body{
    font-family: "Arial" , Verdana, sans-serif;

    color:#4ca68d;
}

/* Main heading */
h1{
    text-align:center;
    font-family: "Times New", Times, serif;

}
/* Chocolate Rough*/
h2{
    margin:0px auto;
    position:relative;

    top:-50px;
    left:-13px;
    margin-bottom:-25px;

    font-family: "Times New", Times, serif;
    }

h3{

    margin:0px;

    font-family: "Times New", Times, serif;
}
/* Inside part */
div{
    background-color:#fff9eb;
    margin:20px auto;
    padding:20px 15px 20px 15px;
    border:none;
    width:670px;
    height:320px;
}


/* chocolate image */
figure{
    float:left;
    margin:0px;
    width:223px;




}

figure+section{
    border-right:1px solid;




}

/* Base_Ingredients */
section{
    width:223px;
    float:left;
}
#Icing h3{
    margin-left:30px;
}
#Icing ul{

    margin-left:75px;
}
section ul{

    margin-bottom:0px;
    margin-top:0px;
    margin-left:43px;
    padding-left:0px;


}
section ul li{
    text-indent:-4px;
}



p{
    text-align: justify;
    text-justify:inter-word;
    clear:left;
    margin-top:0px;
    margin-bottom:0px;
    padding-top:20px;


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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2017/04/02 15:12

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • TomofumiKimura

    2017/04/02 17:27

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

    キャンセル

  • TomofumiKimura

    2017/04/02 17:28

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CSS

    5759questions

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

  • HTML5

    4001questions

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