Mengapa Margin Atas Menolak Div ​​Saya Ke Bawah, dan Bagaimana Saya Boleh Membetulkannya?

Margin-Top Tolak Div ​​Down: Penyelesaian Didedahkan

Menggunakan jidar atas pada elemen pertama yang boleh dilihat pada halaman boleh menyebabkan keseluruhan kandungan div untuk bergerak ke bawah. Ini boleh menjadi sangat ketara dalam bahagian pengepala. Untuk menyelesaikan isu ini, gunakan sifat CSS berikut pada div induk:

overflow: auto;

Harta ini membenarkan div induk untuk secara automatik menampung peningkatan ketinggian yang disebabkan oleh jidar atas pada elemen anak.

Berikut ialah coretan kod sampel diubah suai yang menggabungkan penyelesaian:

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;
}

Dengan menambahkan limpahan: auto harta, div #header akan berkembang secara automatik agar sesuai dengan ketinggian elemen h1, menghalangnya daripada menolak keseluruhan pengepala ke bawah.

Atas ialah kandungan terperinci Mengapa Margin Atas Menolak Div ​​Saya Ke Bawah, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!