masalah pertindihan margin luar div dan penyelesaian

Artikel ini membawakan anda pengetahuan yang berkaitan tentang css terutamanya cara menyelesaikan masalah berkaitan margin div bertindih hanya berlaku di bahagian atas dan bawah dokumen aliran biasa margin, hanya elemen blok akan mempunyai elemen sebaris dan elemen blok sebaris tidak akan mempunyai masalah pertindihan margin. Saya harap ia akan membantu semua orang.

(Belajar perkongsian video: tutorial video css, tutorial video html)

CSS Margin bertindih (margin runtuh)

Jin atas dan bawah blok (margin-atas) dan bawah (margin-bawah) kadangkala digabungkan (diruntuhkan) menjadi jidar tunggal dengan saiz satu maksimum nilai margin (atau hanya satu daripadanya jika ia sama), tingkah laku yang dipanggil margin runtuh.

Bertindih sempadan bermakna jidar bersebelahan (tanpa sebarang kandungan, pelapik atau jidar yang tidak kosong) dua atau lebih kotak (yang mungkin bersebelahan atau bersarang) bertindih untuk membentuk satu jidar.

Dalam erti kata lain, pertindihan jidar merujuk kepada dua elemen peringkat blok yang bersebelahan secara menegak Apabila jidar atas dan bawah bertemu, jidar akan bertindih dan jidar bertindih adalah sama dengan Mana-mana yang lebih besar.

Kaedah untuk mengira nilai margin bertindih:

• Jika kedua-dua nilai margin positif, ambil nilai maksimum kedua-duanya.

• Apabila sempadan negatif berlaku, tolak sempadan negatif dengan nilai mutlak terbesar daripada sempadan positif terbesar.

• Jika tiada sempadan positif, sempadan negatif dengan nilai mutlak terbesar ditolak daripada sifar.

1 Elemen manakah yang akan mempunyai masalah pertindihan margin

Pertindihan margin hanya berlaku dalam dokumen aliran biasa Di antara bahagian atas. dan jidar bawah , hanya elemen blok akan mempunyai pertindihan jidar baik elemen sebaris mahupun elemen blok sebaris tidak akan berlaku. Masalah margin bertindih

2. Dalam keadaan apakah pertindihan margin berlaku?

Situasi pertama: Apabila nilai marin-bottom dan margin-top elemen adik beradik bersebelahan bertindih

dan sempadan bertindih, hanya julat sempadan maksimum akan dipilih dan dibiarkan, jadi margin antara kedua-duanya ialah 100px
Jika anda perlu menyelesaikan masalah pertindihan sempadan ini, anda perlu menambah apungan pada elemen yang terakhir atau meletakkan div pada salah satu abang, dan tetapkan sempadan: 1px putih pepejal;

<div id="box1"></div>
<div id="box2"></div>
 
#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-bottom: 50px;
     margin-top: 50px;
 }
 #box2{
     width: 200px;
     height: 200px;
     background: lightcoral;
     margin-top:100px ;
     opacity: 0.3;
     float: left;   //加上float后，两者间距为150px
 }

Kes kedua: gabungkan jidar induk dan elemen anak pertama/terakhir

Kesan contoh adalah seperti berikut:

<div id="box1">
   <div id="box3"></div>
</div>
#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-top: 50px;
 }
 #box3 {
   width: 100px;
   height: 100px;
   background-color: #f12416;
   margin-top: 50px;
 }

Apabila margin atas kedua-dua elemen induk dan elemen anak ditetapkan kepada 50px, elemen induk dan elemen anak kedua-duanya berada 50px dari sempadan, bukannya jarak 50px antara elemen anak dan elemen induk seperti yang kita fikirkan.

Apabila elemen induk tidak menetapkan jidar atas dan elemen anak menetapkan jidar atas kepada 50px, jarak antara unsur induk dan anak masih 50px dari atas

Penyelesaian:

Kaedah 1: Tambah limpahan: tersembunyi pada elemen induk

Kaedah ini menyelesaikan masalah pertindihan margin kami, tetapi kaedah ini hanya digunakan untuk

" elemen kanak-kanak Ketinggian ditambah ketinggian jidar adalah kurang daripada ketinggian elemen induk (childHeight margin-top, jika tidak, sebahagian daripada kandungan elemen anak akan disembunyikan

Kaedah 2: Tambahkan jidar pada jidar unsur induk (anda boleh menambah jidar lutsinar)

Kaedah 3: Tetapkan paparan: blok sebaris kepada ibu bapa atau anak

Memandangkan hanya terdapat elemen blok Margin bertindih akan berlaku, maka kami menjadikannya bukan elemen blok dan menetapkannya kepada elemen blok sebaris

Kaedah 4: Tetapkan apungan

Kaedah 5: Tetapkan kedudukan: mutlak;

Kaedah 6: Tambahkan padding pada elemen induk

#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-top: 50px;
     /*overflow:hidden;*/
     /*border: 1px solid #00000000;*/
     /*display: inline-block;*/
     /*float:left;*/
     /*position: absolute*/
     /*padding: 10px;*/
 }
 #box3 {
        width: 100px;
        height: 100px;
        background-color: #f12416;
        margin-top: 50px;
        /*display: inline-block;*/
        /*float:left;*/
        /*position: absolute*/
    }

Kes ketiga: elemen peringkat blok kosong

bertindih jidar atas dan jidar bawahnya sendiri. Kita boleh menyelesaikan masalah ini dengan menetapkan sempadan, pa tambah atau ketinggian untuknya.

Selepas menambah sempadan atau padding, jarak antara elemen atas dan bawah masing-masing ialah 50px dan 100px Sebelum menambahnya, jarak antara elemen atas dan bawah ialah 100px

  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <style>
 #box1{
      width: 200px; height:200px;
      background:lightseagreen;
      margin-bottom:50px ;
    } 
    #box2{
      margin-top: 20px;
      margin-bottom:20px ;
      border: 1px solid salmon; //加了border或padding后，与上下两个元素的间距分别为50px和100px,没加之前，上下两个元素的间距为100px
      /*padding: 1px; */
    }
    #box3{
      width: 200px; height:200px;
      background:darkgoldenrod;
      margin-top:100px ;
    }

<.> Kes keempat: Jidar-bawah elemen induk dengan ketinggian auto bertindih dengan jidar-bawah elemen anak

Elemen induk menetapkan sempadan-bawah dan padding-bawah kepada pisahkan mereka, atau boleh jadi

Elemen induk menetapkan ketinggian, ketinggian maks dan ketinggian min juga boleh menyelesaikan masalah ini

3 Cara mengira pertindihan margin

• Jika semua adalah nilai positif, ambil yang terbesar;

• Jika tidak semua nilai positif, ambil nilai mutlak, dan kemudian tolak nilai maksimum daripada nilai positif; >

• Jika tiada nilai positif, ambil nilai mutlak, dan kemudian tolak nilai maksimum daripada 0.

(Mempelajari perkongsian video:

tutorial video css, tutorial video html)

Atas ialah kandungan terperinci masalah pertindihan margin luar div dan penyelesaian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!