頁腳內包含div的額外空間

Question

我正在使用我的第一個網站及其非常基本的代碼，但 div「beyza」，在網站上（圖片上）其文本「網站由Beyza設計」頁腳，不斷顯示額外的空間，我該如何解決這個問題？ here is how it looks

非常感謝提前！

footer { 
 
    width: 100%; 
 
    position: relative; 
 
    background-color: rgb(0, 255, 0); 
 
    overflow: hidden; 
 
} 
 
.container { 
 
    width: %100; 
 
    position: relative; 
 
    background-color: rgb(0, 255, 0); 
 
} 
 
.instagram { 
 
    padding-top: 30px; 
 
    display: inline-block; 
 
} 
 
footer small { 
 
    display: block; 
 
    margin: 20px; 
 
    font-size: 21px; 
 
    color: #FFF; 
 
    text-align: center; 
 
    background-color: rgb(0, 255, 0); 
 
} 
 
.sponsor { 
 
    float: left; 
 
    padding-left: 15px; 
 
    margin-bottom: 15px; 
 
    display: block; 
 
} 
 
.beyza { 
 
    font-size: 14px; 
 
    color: #FFF; 
 
    float: right; 
 
    margin-right: 15px; 
 
}

<footer> 
 
    <div class="container"> 
 
    <div class="instagram"> 
 
     <a href="https://www.instagram.com/alix.bizet/"> 
 
     <img src="images/instagram.png" alt="instagram"> 
 
     </a> 
 
    </div> 
 
    <small>&copy; 2016 Hair by Hood Project </small> 
 

 
    <div class="sponsor"> 
 
     <a href="http://designmuseum.org"> 
 
     <img src="images/DesMus2.png" alt="designmuseum"> 
 
     </a> 
 
    </div> 
 
    <div class="beyza">Site designed by Beyza @<a href="https://graphicdialogue.co">GRAPHIC DIALOGUE</a> 
 
    </div> 
 
    </div> 
 
</footer>

Answer 1

從.sponsor類

.sponsor { 
float: left; 
padding-left: 15px; 
->margin-bottom: 15px; 
display: block; 

}

Answer 2

如果你想保持sponsor更高只需添加width: 100%贊助刪除邊距。

您也可以包裝sponsor和beyza在另一個div元素，並使其： display: flex; flex-direction: row; justify-content: space-between, align-items: flex-start;

• 從贊助商
• 刪除margin-bottom添加align-self: flex-end到beyza

Answer 3

您這裏有一些問題：

1. 你錯過了收錨

   <a href="https://graphicdialogue.co">GRAPHIC DIALOGUE</div>

2. 錯字

   .container{width: %100}

3. adjustmargin底

   .sponsor { float: left; padding-left: 15px; margin-bottom: 15px; //this is the problem-try reduce the size display: block; }