孩子失去的利潤，如果家長是沒有國界的

<div id='wrapt'> 
<img id='logoc' src='https://upload.wikimedia.org/wikipedia/commons/c/c7/Porto_Covo_pano_April_2009-4.jpg' alt='img'> 
</div> 

#wrapt{ 
    margin-top:45px; 
    position:relative; 
    background:#000; 
    border-bottom:2px solid red; 
    border-top:2px solid red; 
} 
#logoc{ 
    display:block; 
    width:50%; 
    margin:25px auto; 
}

如果我從（2px的固體紅色）刪除邊框 - #logoc失去其利潤！
那麼，如何保持家長邊界無邊界？孩子失去的利潤，如果家長是沒有國界的

此問題不與this重複。
這不是關於父母/孩子的利潤率/填充。
我的問題是：

爲什麼孩子的利潤率會降低父母的邊界？

JSFIDDLE

來源

2017-06-26 bonaca

您仍然有餘量，但它在外面。你必須爲這種情況使用填充。 – Huelfe

@Huelfe，我不想在圖像上填充。問題在於爲什麼孩子的利潤率會降低父母的邊界？ – bonaca

@bonaca這可能會讓你指向正確的方向，但基本上當沒有邊界時，邊緣會崩潰。 https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element – Valeklosse

添加填充在#logoc類和#wrapt類刪除邊框

#logoc { 
    display: block; 
    width: 50%; 
    margin: 25px auto; 
    padding: 10px; 
}

來源

2017-06-26 07:34:15 Dixit

我不想在圖像上填充。問題在於爲什麼孩子的利潤率會降低父母的邊界？ – bonaca

此鏈接將幫助您理解。 https://stackoverflow.com/questions/16880851/padding-on-parent-versus-margin-on-child – Dixit

你的鏈接是關於邊際和父母/孩子填充。沒有任何邊界。爲什麼孩子的MARGINS會依賴父母的BORDERS？ – bonaca

#wrapt{ 
    margin-top:45px; 
    position:relative; 
    background:#000; 
    text-align:center; 
} 
#logoc{ 
    display:inline-block; 
    width:50%; 
    margin:25px auto; 
}

使用一個inline block和center對準會工作，inline-block堅持到頂部和底部邊緣。

來源

2017-06-26 07:33:37 Valeklosse

由於裏面的其他元素，我不希望在父級上使用「text-align：center」。問題在於爲什麼孩子的利潤率會降低父母的邊界？ – bonaca

您可以通過浮動這兩個元素，增加實際寬度以兩種元素做到這一點：

#wrapt{ 
     margin-top:45px; 
     position:relative; 
     background:#000; 
     float:left; 
     width:100%; 
    } 
    #logoc{ 
     display:block; 
     float:left; 
     width:50%; 
     margin:25px 25%; 
    }

來源

2017-06-26 07:43:39 jkwiatkowski

我不想在圖像上填充。問題在於爲什麼孩子的利潤率會降低父母的邊界？ - 這是因爲該父項是空的，該元素的olny內容是該寄宿生 – jkwiatkowski

不，邊界不是內容，邊界是邊界。順便說一句我內部有其他元素，絕對定位，但它們在這裏不相關。 – bonaca

exactl，因此，當它被設置爲不具有寬度，高度或浮點數的父親相對div時，它更像是空的div（沒有內容） – jkwiatkowski

孩子失去的利潤，如果家長是沒有國界的

回答

相關問題