爲什麼我的div像我一樣指定了一釐米和一半的margin-top/margin-bottom？

我正在使用AngularJS應用程序，並且遇到不需要的空白。爲什麼我的div像我一樣指定了一釐米和一半的margin-top/margin-bottom？

<div class='user' ng-repeat='session in sessions'> 
    <div class='text' ng-bind='monologues[session][0]'></div> 
    <div class='timestamp' ng-bind='monologues[session][1] | to_locale'></div> 
</div>

我指定div.user（使用jQuery動態計算）的最小高度，並且沒有div.text或div.timestamp的高度或邊距。 Chrome的元素檢查器似乎沒有像div.text或div.timestamp那樣的邊距或最小高度。手動指定零邊距和最小高度爲div.user：

<style type="text/css"> 
     div.user 
      { 
      overflow-y: auto !important; 
      white-space: pre-wrap; 
      } 
     div.user div 
      { 
      margin: 0; 
      min-height: 0; 
      } 
     input[type='text'] 
      { 
      width: 100%; 
      } 
     textarea 
      { 
      width: 100%; 
      height: 150px; 
      } 
    </style>

該頁面使用H5BP CSS，但徵求意見的包括關於該文件不圍繞兩個內部div的邊緣變爲div.user。

有沒有其他的事情可能會給我不想要的邊際行爲？

來源

2014-06-19 JonathanHayward

什麼元素有不需要的空白'div.user'或'div.text'？ –

div.text和div.timestamp都表現得好像它們有不需要的空白; div.user會滾動，如同那些有不需要的空白的元素。但是，我一直無法找到與Chrome的檢查員空白。 – JonathanHayward

你可以在'div.user'上試試'font-size：0'，看看是否消除了子項上不需要的空白。 –

你white-space: pre-wrap;導致問題

看到http://jsfiddle.net/GVTr2/

現在，這是它

http://jsfiddle.net/GVTr2/1/

我不知道爲什麼你需要它，但至於你的問題，這是原因

div.user { 
    overflow-y: auto !important; 
}

如果你真的想保持它，那麼你可以有你的HTML像下面

<div class='user' ng-repeat='session in sessions'><div class='text' ng-bind='monologues[session][0]'>asfafd adsfds</div><div class='timestamp' ng-bind='monologues[session][1] | to_locale'>sdf sdf as</div></div>

http://jsfiddle.net/GVTr2/2/

定義font-size: 0爲你的父母一行，並定義了一個font-size兒童。這不是做事情的理想方式，因爲這可能會很快變得非常混亂。

我認爲最好的方法是不使用預先包裝

來源

2014-06-19 17:40:50 Huangism

爲什麼我的div像我一樣指定了一釐米和一半的margin-top/margin-bottom？

回答

相關問題