Div巢狀引起子元素的margin－top不起作用

阿新 • • 發佈：2019-01-03

最近研究css中遇到一個問題，業務情景是這樣的：在body內，有兩個div，div1是父元素，div2是子元素，設定div2的margin-top引起div1的變化，div2卻沒有變化。
先上程式碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>divtest</title>
        <style type="text/css">
            body {
                margin 
: 0;
                padding: 0px;
            }
            #div1 {
                width: 200px;
                height: 200px;
                background: yellow;
            }

            #div2 {
                height: 100px;
                width: 100px;
                background: red;
                margin 
: 20px;
            }
        </style>
    </head>

    <body>

        <div id="div1">
            <div id="div2">
</div>
</div>
    </body>

</html>

效果如下：

目前具體的理論原因我沒有研究明白，但是一些解決方案可以解決這個問題：
1.div1設定border屬性
2.div2設定position為absolute或者relative，並且設定top left等屬性。
3.div1可以通過設定padding屬性。

Div巢狀引起子元素的margin－top不起作用

最近研究css中遇到一個問題，業務情景是這樣的：在body內，有兩個div，div1是父元素，div2是子元素，設定div2的margin-top引起div1的變化，div2卻沒有變化。先上程式碼： <!DOCTYPE html> <

關於內層DIV設定margin-top不起作用的解決方案

關於內層DIV設定margin-top不起作用的解決方案閱讀目錄關於內層DIV設定margin-top不起作用的解決方案回到頂部關於內層DIV設定margin-top不起作用的解決方案（一）近日在做另外一個站點的時候，又遇到這個問題，決定好好的研究

為您解惑：關於內層DIV設定margin-top不起作用的解決方案。。。

<span style="font-size:14px;">//程式碼如下： <div>上層</div> <div>  　　<div style="margin-top:40

Android inflate與xml根元素的佈局引數不起作用的問題

使用inflate載入佈局，根佈局的佈局引數不起作用，如下Fragment中載入fragment_layout public class MyFragment extends Fragment{ private View mView; @O

html margin-top 不起作用

今天在做頁面的時候，出現了一個問題，程式碼如下: <dl> <dt><img src="images/a.jpg" /></dt> <

div巢狀後margin出現失效（轉移）的問題

在一次寫頁面時，發現div巢狀後margin居然失效了，直接作用到了外層div上，調了好了一陣子發現css應該沒有寫錯。於是想，會不會有什麼潛在的我不知道的因素，一搜果然發現有許多人遇到了類似的問題，轉載於此。現象：在一些瀏覽器中，有兩個巢狀關係的div

div巢狀時，內部div使用margin引發的問題

前言前端永遠有學不完的東西，改不完的bug。因為客戶需求永遠都在變化，測試找到bug也總是最先找到前端開發，所以前端是最苦逼的。問題最近在為一個專案開發一個簡單的下載頁面，UI十分簡單：上部分一句高逼格的裝逼句子，中間一張圖，底部一個下載按鈕，加上一

關於div巢狀問題

div巢狀問題解決問題 <ul class='tab-title'> <li class='select></li> <li></li> </ul> <div class='tab-con

Jquery實現拖拽div巢狀的iframe不卡頓

css * {padding: 0;margin: 0;box-sizing: border-box;} .main {width: 1000px;height: 700px;position: absolute;left: 50%;top: 50%;margi

DIV巢狀時外層無法自適應高度三種解決方案

http://developer.51cto.com/art/201009/225428.htm 這裡向大家描述一下解決DIV巢狀時外層（父層）無法自適應高度的方法，原本自己寫的CSS程式碼是沒有錯誤的，但是為什麼在新版的瀏覽器中會發現使用DIV巢狀時外層（父層）無法自

關於div巢狀，不顯示邊框問題

最近做了一個專案，用到了div+css的知識，覺得對於這些自己是十分熟悉的。可是在除錯div的邊框的時候，總是弄不好，最後是自己的border屬性弄錯了。在jsp中的border屬性可以跟多個值，注意：值之間不是贏 ‘，’分隔的，用空格鍵分隔的。<div >

關於在一個頁面的div巢狀另一個頁面導致下拉框失效的問題

做後臺管理頁面，在一個主頁面中巢狀另一個頁面，通過主頁面點選不同選單，在頁面另一部分顯示不同的子頁面，知道有兩種方法： 1.使用<iframe>視窗; 2.在主頁面的div裡面巢狀一個子頁面，$("#divId").load("XXX.jsp"). 在用第二個方

jquery實現樓層巢狀（DIV巢狀）

經常看到評論區回覆樓層巢狀，也就是蓋樓，下面來用jquery來實現div佈局程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

div巢狀ul時div的寬度和高度自適應

div中巢狀ul時div的寬度和高度隨著ul裡元素的變化而變化，下面是一個事例，可以改變li元素的內容和個數去驗證： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

DIV巢狀過程中的高度自適應問題

對於很多網站製作的新手朋友來說，學習DIV+CSS是必不可少的。站長在一些上海網站製作論壇以及QQ群裡面，還有百度問答裡面，看到很多朋友在問巢狀DIV的很多問題，比如巢狀DIV 高度自適應的問題，我們也看過很多這樣的實現方式，比如很多論壇或者百度問答說到用JS程式實現

【html基礎】p標籤裡面不能巢狀塊級元素

在<p></p> 標籤裡面巢狀 div 等原生塊級元素會在渲染頁面時候出錯，di

在小程式中巢狀h5頁面，點選事件不觸發

最近在寫小程式，由於小程式快滿了，就把頁面寫成h5，嵌在小程式裡，原以為很簡單，沒想到遇到問題，問題不多，但是很大第一個就是點選事件不觸發，場景如下：點選按鈕觸發ajax請求，請求成功之後跳轉到另一個頁面，但是頁面始終不跳轉。解決方法，將http開

Android RecyclerView巢狀到ScrollView中Item的寬度不能完全填充父佈局的問題

RecyclerView巢狀到ScrollView經常會出現item不能完全填充的問題，給大家個簡單暴力的方案：重新設定佈局引數 class MyViewHolder extends RecyclerView.ViewHolder{ private My

C++ 的巢狀類模板的特化定義不允許寫在類定義的範圍內

最近在使用在使用模板特化寫一段程式時發現一個奇怪的問題，比如像如下程式碼： #include <iostream>using namespace std;class CMyClass{public: template <typename T> struct test {

RecyclerView常見問題解決方案，RecyclerView巢狀自動滾動，RecyclerView 高度設定wrap_content 無作用等問題

1，ScrollView或者RecyclerView1 巢狀RecyclerView2 進入頁面自動跳轉到recyclerView2上面頁面會自動滾動貌似是RecyclerView 自動獲得了焦點兩

Div巢狀引起子元素的margin－top不起作用

相關推薦