保證金影響父母>兄弟姐妹項目？

爲什麼.ibg .im頁邊距設置會影響文本對齊？保證金影響父母>兄弟姐妹項目？

我試着找到一個解決方案，但搜索詞的含糊不清在谷歌提出的結果。

任何人都可以闡明這一點嗎？任何援助讚賞。

要看到我的問題，從.ibg .im CSS規則中刪除的空白。

enter image description here

CSS

body { 
    padding-top: 50px; 
} 
.ibg { 
    width: 48px; 
    height: 48px; 
    display: inline-block; 
} 
.ibg .im { 
    margin: 8px; 
} 
.olist { 
    font-size: 18px; 
    font-weight: bold; 
    font-family: Futura, "Trebuchet MS", Arial, sans-serif; 
    list-style: none; 

} 
.olist li { 
    list-style: none; 
} 
.olist .lbl { 
    margin-left: 10px; 
    display: inline-block; 
}

HTML

<div class="container"> 
     <div class="starter-template"> 
     <ul class='olist'> 
      <li> 
      <div class='ibg' style='background-color: #B1BF54'> 
       <div class='im'> 
       <img src='http://placehold.it/32x32/000000/ffffff&text=img' /> 
       </div> 
      </div> 
      <div class='lbl'>Title here</div> 
      </li> 
     </ul> 
     </div>  
    </div><!-- /.container -->

UPDATE

如此看來，這個問題觸及了這個問題：CSS Margin Collapsing。但是它沒有解決刪除兄弟填充/邊距的方法。

假設我想讓文本出現在綠框的頂端......沒有辦法做到這一點，沒有position:relative;和top:-8px？這種解決方案似乎是一個很奇怪的CSS怪癖不必要的hackish響應

來源

2014-06-28 1owk3y

將'vertical-align：top'設置爲'.lbl'可能是您需要的，請參閱我發佈的答案中的演示。 –

也與此問題相關：http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element –

考慮您的HTML：

<div class="container"> 
    <div class="starter-template"> 
     <ul class='olist'> 
      <li>x 
       <div class='ibg' style='background-color: #B1BF54'> 
        <div class='im'> 
         <img src='http://placehold.it/32x32/000000/ffffff&text=img' /> 
        </div> 
       </div> 
       <div class='lbl'>Title here</div> 
      </li> 
     </ul> 
    </div> 
</div><!-- /.container -->

我在li元素的開頭添加了字母x來說明默認基線的位置，在這種情況下，它是字符x的底部。

的x後，你有inline-block的.ibg其中包含嵌套在一個塊級元素.im的圖像（但這個塊根本在於父inline-block的範圍內，因此不會影響在這種情況下基線）。默認情況下，圖像的底部將與由父元素確定的基線對齊，在此例中爲li元素。

然後，您有.lbl元素，該元素也是內聯塊，因此該文本框的底部也與由li確定的基線對齊。

如果您要更改li或vertical-align的line-height，您會看到效果。

事實上，你可以在每個行內元素的改變vertical-align值來獲得交錯的效果，如圖所示的演示：

http://jsfiddle.net/audetwebdesign/9R4zn/

sample

要點： 父元素設置封閉內聯元素的基線級別（甚至是深嵌嵌入的塊）。

來源

2014-06-28 19:03:21

很好的答案，寫得很好。感謝您的幫助Marc！ – 1owk3y

使雙方.ibg和.lblvertical-align:middle

http://jsfiddle.net/775zA/2/

來源

2014-06-28 18:41:12 ry4nolson

這可能會解決我的問題，但不回答我的問題*爲什麼* – 1owk3y

因爲瀏覽器默認是'''vertical-align：baseline''' – ry4nolson

我的意思是，它不能解釋爲什麼深度嵌套項目的CSS影響父母和兄弟姐妹。 – 1owk3y

試試這個

.ibg, .olist .lbl{ 
vertical-align:middle 
}

來源

2014-06-28 18:47:39 amol

這可能會解決我的問題，但不回答我的問題，爲什麼* – 1owk3y

保證金影響父母>兄弟姐妹項目？

回答

相關問題