ボタンとコンテンツ/段落の間のスペースを取り除く方法は？（CSS）

-2

私はhtml/css/jsでマニュアルを作成しています。マニュアルを読むために2つのボタンを作っています。ボタンとコンテンツ/段落の間のスペースを取り除く方法は？（CSS）

これは、それがどのように見えるかです：

奇妙これは、最初のプレビューメニュー項目「introductieは」第四プレビューメニューアイテムのハートのmeten 'と同じCSSコードを持っています。しかし、プレビューされた「紹介」の段落とボタンの間には、なぜギャップがありますか？

私のコード：

HTML

<!DOCTYPE html> 
<html lang="nl"> 

<head> 
    <meta charset="utf-8"/> 
    <title>Hartmeting</title> 

    <link rel="stylesheet" href="css/stylesheet.css" type="text/css"> 

</head> 

<body> 

    <div id="wrapper"> 
     <header> 

      <div id="logo" onclick="window.location.href='http://localhost/Zorg_Heartbeat%20Manual/'"> 
       <img src="img/logo.png" alt="logo" /> 
       <h1 >Hartmeting voor fitte mensen</h1> 
      </div> 

     </header> 

     <!-- Stappenplan Menu --> 
     <nav id="menu"> 
      <ul> 

       <li><a href="#menu_a"> Introductie </a></li> 
       <li><a href="#menu_b"> Het Probleem </a></li> 
       <li><a href="#menu_c"> Stappenplan </a></li> 
       <li><a href="#menu_d"> Hartmeting </a></li> 
      </ul> 

     </nav> 

     <!-- HET STAPPENPLAN --> 
     <div id="content"> 

      <!-- Intro Slide --> 
      <article id="menu_a"> 
       <h2>Introductie</h2><br> 
       <figure> 
        <img src="img/intro1.jpeg" alt="Intro Afbeelding"/> 
       </figure> 
       <p>Joggers zijn actieve mensen die graag tussen werk en/of studie nog even de kilometers willen pakken. Hierin houden ze graag bij of ze fitter worden of niet, zo zul je vaak zien dat joggers hun rusthartslag meten om een indicatie van positieve 'progress' te kunnen inzien. Het bijhouden van de gezondheid hoort eigenlijk niet alleen bij joggers, maar bij elk fit persoon die graag de resultaten wilt vastpakken. Zonder dat je een smartwatch nodig hebt, kun je met elk apparaat die beschikking heeft tot het internet, je hartslag meten!</p> 
      </article> 

      <!-- Slide 1 --> 

      <article id="menu_b"> 
       <h2>Het Probleem</h2><br> 
       <figure> 
        <img src="img/hetprobleem1.jpg" alt="Eerste Afbeelding"/> 
       </figure> 
       <p>Maar waarom een WebApp die je hartslag meet? Simpel, smartwatches zijn nou eenmaal veels te duur, je gebruikt ze niet altijd en daarnaast zijn ze de meeste ook nog eens privacy gevoelig.</p> 
      </article> 

      <!-- Slide 2 --> 

      <article id="menu_c"> 
       <h2>Hoe kan mijn hartslag meten?</h2><br> 
       <figure> 
        <img src="img/polsmeten.png" alt="Tweede Afbeelding"/> 
       </figure> 

       <ol id="stappen"> 
        <li>Ga gerust zitten.</li> 
        <li>Houd je wijsvinger en middelvinger tegen elkaar.</li> 
        <li>Leg beide vingers links of rechts van de adamsappel (zoek naar een kloppende beweging).</li> 
        <li>Klik met je linker muisknop op de box elke keer dat je een klopping voelt.</li> 
        <li>Doe dit achtereenvolgend tot dat je 10 keer hebt geklikt (dus 10 kloppingen).</li> 
        <li>De pop-up laat je gemiddelde hartslag per minuut zien.</li> 
       </ol> 


      </article> 

      <!-- Slide 3 -->  

      <article id="menu_d"> 

       <h2>Hart Meten</h2><br> 
       <figure> 
        <!-- Hartmeet tool --> 
         <div id="klik_Hart" class="heart"> 
         </div> 
         <br> 
         <br> 
         <br> 

         <!-- Einde hartmeet tool--> 
        </figure> 

        <ol id="stappen"> 
         <li>Een normaal rustend hart van een volwassenen meet tussen de 60 - 100 hartslagen per minuut.</li> 
         <li>Boven de 100 is slecht.</li> 
         <li>Richting de 40 is goed.</li> 
        </ol> 

       </article> 

       <!-- ABOUT --> 
            <!-- <div id="about"> 

             <p>TEST TEST TEST TEST TEST TEST TEST TEST TEST </p> 

            </div> --> 


            <!-- vorige/volgende buttons --> 
            <table id="volgorde"> 
             <th><button class="button" id="previous">Previous</button></th> 
             <th><button class="button" id="next">Next</button></th> 
             <th> 
              <!-- Checkbox Auto Slider --> 
              <div class="auto_menu"> 
               <input type="checkbox" id="checkbox"> 
               <label for="checkbox">Auto Handleiding</label> 
              </div> 
              <!-- --> 
             </th> 
            </table> 

           <div id="myNav" class="overlay"> 
           <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
           <div class="overlay-content"> 
           <p> Wij zijn ....</p> 
           </div> 
           </div> 


           </div> 
           <div id="buffer"></div> 
           <footer> 
           <a id="footer_" href="#" onclick="openNav()">&#9776; Over ons </a> 
           </footer> 

          </div> 

          <script src="js/jquery-3.1.1.js" type='text/javascript'></script> 
          <script src="js/scripts1.js" type='text/javascript'></script> 


         </body> 

         </html>

CSS

#titel{ color: #B0C4DE; text-align: center;} 

/*Verstop alle artikelen binnen content*/ 
article { 
    display:none; 
} 

body{ 

    background-color: #333333; 
    color: grey; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
    font-size: 12pt; 
    width: 100%% 
} 

#wrapper{ 

    background-color: #ADD8E6; 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    /*background-image: url("../img/bg.jpg");*/ 
    background-size: cover; 
    background-position: left top; 
    border: 2px groove #001f3f; 
    overflow: auto; 

} 

#content{ 
    margin-left: auto; 
    margin-right: auto; 
    float: left; 
    width: 70%; 
} 

#content img{ 

    height: 250px; 
    width: 450px; 
} 

#menu{ 

    font-weight: thin; 
    color: #424242; 
    float: left; 
    width: 15%; 
    text-align: center; 
    margin-left: 5%; 
    margin-top: 6.7%; 
    font-size: 10pt; 
} 

    ul{list-style-type: none;} 

    h1{ text-shadow: 1px 1px 3px #00008B;} 

    a{ 
     display: block; 
     text-decoration: none; 
     color: #0074D9; 
     background-color: #001f3f; 
     border: 1px solid #B0C4DE; 
     padding: 5px; 

    } 

    a:hover{ 
     background-color: #FFD900; 
     color: #001f3f; 
    } 

    footer{ 
     overflow: hidden; 
     clear: both; 
    } 

    #volgorde{ 
     font-weight: thin; 
     color: grey; 
     width: 10%; 
     text-align: center; 
     clear: both; 
     margin-left: 3%; 
     margin-bottom: 2%; 
    } 

    .button { 
     background-color: #001f3f; 
     color: #FFDC00; 
     border: none; 
     color: white; 
     padding: 5px 30px; 
     text-align: center; 
     text-decoration: none; 
     display: inline-block; 
     font-size: 14px; 
     display: block; 
    } 

    .button:hover{ 
     background-color: #FFD900; 
     color: #001f3f; 
    } 

    .heart{ 
     color:#FBF9FF; 
     background-image: url("../img/hart4.png"); 
     background-size: 150px 150px; 
     height: 150px; 
     width: 150px; 
    } 

    .heart:hoover{ 
     color: #FFA07A; 
     background-color: grey; 
    } 

    #uitleg p { 
     color: #FA8072; 
    } 

    #logo img { 
     float: left; 
     width: 60px; 
     height: 60px; 
     margin-left: 2%; 

    } 

    #logo h1 { 
     position: relative; 
     top: 15px; 
     left: 10px; 
    } 

    #klik_ { 
     text-align: center; 
    } 

    article p { 

     height: 200px; 
     width: 450px; 
     font-size: 10pt; 
     color: grey; 
     font-weight: bold; 
     overflow: scroll; 
     margin-left: 4%; 
     margin-bottom: 5%; 
     text-align: justify; 
     text-justify: inter-word; 
    } 

    #buffer{ 
     clear: both; 
     height: 10%; 
    } 

    #stappen{ 
     font-weight: bold; 
     font-size: 10pt; 
    } 

    .auto_menu { 
     position: relative; 
     margin: 5px auto; 
     width: 160px; 
     font-size: 14px; 
    } 


    /*OVER ONS OVERLAY*/ 

    .overlay { 
    height: 0%; 
    width: 100%; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0, 0.9); 
    overflow-y: hidden; 
    transition: 0.5s; 
} 

.overlay-content { 
    position: relative; 
    top: 25%; 
    width: 100%; 
    text-align: center; 
    margin-top: 30px; 
} 

.overlay a { 
    padding: 8px; 
    text-decoration: none; 
    font-size: 36px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
} 

.overlay a:hover, .overlay a:focus { 
    color: #f1f1f1; 
} 

.overlay .closebtn { 
    position: absolute; 
    top: 20px; 
    right: 45px; 
    font-size: 60px; 
} 

@media screen and (max-height: 450px) { 
    .overlay {overflow-y: auto;} 
    .overlay a {font-size: 20px} 
    .overlay .closebtn { 
    font-size: 40px; 
    top: 15px; 
    right: 35px; 
    } 
}

EDIT：ウェブインスペクタを表示します：

Screenshot showing findings

だから私はそれがかもしれないと思う：私はこれを削除したとき

margin-bottom: 5%;

、何も起こらなかった。..

出典

2016-11-27 user7186746

ブラウザの "inspect element"関数で問題の要素を調べると、何がギャップパディング、マージンなどの原因であるかがわかります。 – junkfoodjunkie

ここをクリックしてyour13 htmlエラーを修正してください。あなたのコードを貼り付けてくださいhttps://validator.w3.org/nu/#textarea一度あなたのHTMLを編集し直してください – mlegg

@mleggありがとう私はこれを知らなかった、私は13のエラーを修正し、戻ってきます。 – user7186746

をあなたのpのheightを定義しました。つまり、お客様のelementは、elementの内容にかかわらず、の200pxに常に表示されます。かなりまっすぐ進む、あなたはブロック内でどのように表示され

display: inline-block; 
height: auto;

コード：ために

はへdynamicheightの変化、それにそれを変更します。高さは、blockのinlineに応じて自動的に調整されます。

出典

2016-11-27 02:54:24 Nytrix

ボタンとコンテンツ/段落の間のスペースを取り除く方法は？ （CSS）

答えて

関連する問題

ボタンとコンテンツ/段落の間のスペースを取り除く方法は？（CSS）