CSS-邊距不工作

#modal { 
 
    background-color: #f0f0f0; 
 
    //border: thin red solid; 
 
    height: 500px; 
 
} 
 
#category_main { 
 
    width: 75%; 
 
    height: 200px; 
 
    border: thin red solid; 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-top: 5%; 
 
}

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

當我再運行，邊距不工作。 div category_main已經下了它提交的div。我不想要那個白色的部分。而不是，只有那個紅色邊框應該受到margin-top的影響。

謝謝。

任何幫助將不勝感激。

來源

2016-08-01 Bhavin Shah

的可能的複製（HTTP [爲什麼這個CSS的margin-top風格不行？]：/ /stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work） – Vucko

，你應該申請padding-top到#modal，因爲前者留下的空隙，而後者包括相同：

#modal{ 
    background-color: #f0f0f0; 
    //border: thin red solid; 
    height: 500px; 
    padding-top: 5%; 
}

看演示here

來源

2016-08-01 10:13:38 Shashank

添加overflow:hidden父讓家長獲得指定了其真正的高度..

這裏是片段

#modal{ 
 
     background-color: #f0f0f0; 
 
     /*border: thin red solid;*/ 
 
     height: 500px; 
 
     overflow:hidden; 
 
} 
 

 
    #category_main{ 
 
       width: 75%; 
 
       height:200px; 
 
       border: thin red solid; 
 
       margin: 0 auto; 
 
       margin-top: 15%; 
 
      }

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

注意

在CSS評論應該/*.......*/這間代替將margin-top到#category_main的傳遞中，不//....

來源

2016-08-01 10:10:56

我想你有這個錯誤的方法。你想填充外部div。

padding-top: 5%;

來源

2016-08-01 10:14:07

這是保證金的工作原理。您可以在這裏閱讀更多信息：https://www.w3.org/TR/CSS2/box.html

要解決這個問題，您可以像其他答案一樣告訴您使用填充。

您還可以添加overflow: auto父像這樣：

#modal{ 
 
     background-color: #f0f0f0; 
 
     height: 500px; 
 
     overflow: auto; 
 
} 
 

 
    #category_main{ 
 
       width: 75%; 
 
       height:200px; 
 
       border: thin red solid; 
 
       margin: 0 auto; 
 
       margin-top: 15%; 
 
      }

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

來源

2016-08-01 10:27:38

使用這個CSS爲#modal，

垂直對齊：中間;

display：table-cell;

#modal { 
 
    background-color: #f0f0f0; 
 
    //border: thin red solid; 
 
    height: 500px; 
 
    width: 500px; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
#category_main { 
 
    width: 75%; 
 
    height: 200px; 
 
    border: thin red solid; 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-top: 5%; 
 
}

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

來源

2016-08-01 10:27:39

真的，如果ü不想你需求的白色空間，只需添加填充：5％到主分區..可B本將解決你的問題

#modal { 
 
    background-color: #f0f0f0; 
 
    //border: thin red solid; 
 
    height: 500px; 
 
    padding: 5%; 
 
} 
 
#category_main { 
 
    width: 75%; 
 
    height: 200px; 
 
    border: thin red solid; 
 
    display: block; 
 
    margin: 0 auto; 
 
    
 
}

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

#modal { 
 
    background-color: #f0f0f0; 
 
    //border: thin red solid; 
 
    height: 500px; 
 
    padding:5%; 
 
} 
 
#category_main { 
 
    width: 75%; 
 
    height: 200px; 
 
    border: thin red solid; 
 
    display: block; 
 
    margin: 0 auto; 
 

 
}

<div id="modal"> 
 
    <div id="category_main"></div> 
 
</div>

來源

2016-08-11 12:39:18

CSS-邊距不工作

回答

相關問題