頁腳內包含div的額外空間

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

非常感謝提前！

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>

來源

2016-11-16 Beyza Ucak

從.sponsor類

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

}

來源

2016-11-16 17:38:33 user2693928

如果'.sponsor'上的邊距被移除，'.beyza'還有一些空間。如果OP希望「.sponsor」和「.beyza」共享基線，該怎麼辦？ – hungerstar

如果你想保持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

來源

2016-11-16 17:39:58 niemaszoka

我在猜測OP會希望「.sponsor」和「.beyza」共享一個基線。 – hungerstar

然後從@ sponsor2693928指出 – niemaszoka

從'sponsor'元素中刪除'margin-bottom'。可能在鏈接的圖片中'.sponser'中的圖片大約是'.beyza'中文本高度的兩倍。刪除保證金不會改變這一點。猜測我們必須等待OP的一些反饋才能確定地知道。 – hungerstar

您這裏有一些問題：

你錯過了收錨

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

.container{width: %100}
adjustmargin底

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

來源

2016-11-16 17:49:32 RizkiDPrast

頁腳內包含div的額外空間

回答

相關問題