2017-01-05 50 views
0

訪問網址[文件:/// Users/CatherineDu /百度雲同步盤/practice/about.html]我是html和css的新手,試圖在這裏構建一個簡單的網站。我一直在我的段落結尾和頁腳之間留下這些空白處,空白處大約2釐米寬?我嘗試修復邊距或將邊緣底部設置爲零,但沒有任何工作。如何去除段落和頁腳之間的白色空白?

<!DOCTYPE html> 
    <hmtl> 
     <head> 
      <meta charset="utf-8"> 
      <title> The Tailory New York </title> 
      <link rel="stylesheet" href="css/normalize.css"> 
      <link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet"> 
      <link rel="stylesheet" href="css/main.css"> 
     </head> 
     <body> 
      <header> 
       <div id="logo"> 
       <a href="index.html"> 
       <img src="img/logo_The Tailory New York_black.png" alt=""> 
       </div> 
       <nav> 
        <ul> 
         <li> <a href="home.html">Home </a> </li> 
         <li> <a href="app.html">Appointment </a> </li> 
         <li> <a href="gallery.html">Gallery </a></li> 
         <li> <a href="about.html"class="selected">About</a></li> 
         <li> <a href="contact.html" >Contact </a></li> 
        </ul> 
       </nav> 
      </header> 
        <section> 
        <img src="img/profile.jpg" alt="" class="profile_photo"> 
        <div class="profile"> 
        <h1>ABOUT</h1> 
          <h2>The Brand</h2> 
           <p> 
            The Tailory New York is an appointment only custom clothing company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market. 
           </p> 
          <h2>The Concept </h2> 
           <p> 
            Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle. 
           </p> 
          <h2>A Note From the Founder</h2> 
           <p> 
            The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style. 
            My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best. 
            At The Tailory New York, 「we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.」 Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br> 
            <br> </br> 
            Sincerely,</br> 
            Shao Yang, Founder 
            <br> </br> 
           </p> 
           </div> 

        </section>   
       </body> 

       <div id="social_media"> 
        <footer> 
         <a href="https://www.facebook.com/thetailorynewyork"> <img src="img/facebook.jpg" alt="Facebook logo" class="social-icon"> </a> 
         <a href="https://www.twitter.com/thetailorynewyork"> <img src="img/twitter.png" alt="Twitter logo"class="social-icon"></a> 
         <a href="https://www.instagram.com/thetailorynyc"> <img src="img/instagram.jpeg" alt="Instagram logo"class="social-icon"> </a> </br> 
         &copy; 2017 The Tailory New York All Rights Reserved 
        </footer> 
      </div> 


    /**************************************** 
    GENERAL 
    *****************************************/ 
    a { 
     text-decoration: none; 
    } 

    img{ 
     max-width: 100%; 
    } 




    /**************************************** 
     BACKGROUND ANIMATION 
    ****************************************/ 
    section ul{ 
     list-style: none; 
     margin: 0; 
     padding: 0; 
    } 
    #selector{ 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 

    /*************************************** 
    HEADER 
    ***************************************/ 


    /* header black*/ 
    header{ 
     background: black; 
    } 


    /* black header using the Tailory's logo*/ 
    #logo{ 
     text-align:center; 
     margin: 0; 
     padding: 0 5% 
    } 


    /* nav links black */ 
    nav{ 
     background: black; 
    } 

    nav ul{ 
     list-style: none; 
     margin: 0 10px; 
     padding: 0; 
     text-align: center; 
    } 

    nav li{ 
     display: inline-block; 
    } 

    /* nav link and visited link white*/ 
    nav a{ 
     font-weight: 800; 
     padding: 15px 10px; 
     color: white; 
     font-family: 'Crimson Text', sans-serif; 
     font-size: 1.25m; 
    } 
    nav a:link{ 
     color: white; 
    } 
    nav a:visited{ 
     color: grey; 
    } 

/********* FOOTER ***************************************/

footer{ 
     font-size: 1em; 
     text-align: center; 
     clear: both; 
     padding: 50px 50px; 
     color: white; 
     background-color: grey; 
     overflow: hidden; 
    } 

    .social-icon{ 
     width: 20px; 
     height: 20px; 
     margin: 0 5px; 
    } 
    /*************************************** 
    PAGE: ABOUT 
    ***************************************/ 
    h1{ 
     margin: 0 0 1.5em 0; 
     font-family: 'Rakkas','sans-serif'; 
     font-weight: 500; 
    } 

    h2{ 
     margin: 0 0 1.2em 0; 
     font-family: 'Rakkas', 'sans-serif'; 
     font-weight: normal; 
    } 

    .profile{ 
     color: grey; 
     background-color: black; 
     margin-bottom: 0; 
     padding: 0; 
    } 

    .profile_photo{ 
     display: block; 
     max-width: 100%; 
     margin: 0; 
     padding: 0; 
    } 
+1

的 「URL」 點到本地文件系統。順便說一句,我建議使用一些工具,如Chrome開發工具,然後檢查元素,以確切地看到發生了什麼「空白」。 – noahnu

+0

使最後一個'p'標籤'邊距:0;'在部分 –

+1

[JSfiddle](https://jsfiddle.net/29s01dd7/) –

回答

1

#social_media</body>之外 - 你需要保持所有的HTML裏面<body></body>

但您只需從.profile部分的最後一段刪除底部邊距。你可以用這個CSS來完成。

.profile p:last-child { 
    margin-bottom: 0; 
} 

這裏有一個演示http://codepen.io/anon/pen/LxEbWv

+0

非常感謝!你能解釋一下最後一個孩子嗎? – Kat

+0

@Catherine':last-child'選擇在其兄弟中顯示爲「last」元素的'p'。即這是它直系父母的最後一個孩子。 – noahnu

-1

將此添加到您#social_media

margin-top: -16px;