首頁 >web前端 >css教學 >為什麼上​​邊距會壓低我的 Div,我該如何解決?

為什麼上​​邊距會壓低我的 Div,我該如何解決?

Susan Sarandon
Susan Sarandon原創
2024-12-18 17:29:15880瀏覽

Why Does a Top Margin Push My Div Down, and How Can I Fix It?

Margin-Top 將Div 向下推:解決方案揭曉

將上邊距應用於頁面上的第一個可見元素可能會導致整個包含div 向下移動。這在標題部分尤其明顯。若要解決此問題,請將下列 CSS 屬性套用至父 div:

overflow: auto;

此屬性允許父 div 自動適應子元素上邊距導致的高度增加。

這是一個包含解決方案的修改後的範例程式碼片段:

div#header{
    width: 100%;
    background-color: #eee;
    position: relative;
    overflow: auto;
}

div#header h1{
    text-align: center;
    width: 375px;
    height: 50px;
    margin: 50px auto;
    font-size: 220%;
    background: url('../../images/name_logo.png') no-repeat;
}

透過添加溢位:auto屬性,#header div將自動擴展以適應高度h1 元素,防止其將整個標題向下推。

以上是為什麼上​​邊距會壓低我的 Div,我該如何解決?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn