CSS div 定位亂位？h3 預設 margin 導致邊框與內容錯位

現象

外層 .divcss5 設定邊框、寬高，內層 h3 設 position:absolute，結果邊框與內容分離、錯位。

根本原因

瀏覽器預設樣式表 (User Agent Stylesheet) 給 h3 套用 margin: 1em 0。
position:absolute 會脫離文檔流，但 margin 仍影響其定位基點，導致視覺偏移。

修正方法

.divcss5 h3 {
    margin: 0; /* 關鍵：歸零預設 margin */
    position: absolute;
    top: 0; left: 0; /* 明確定位 */
    width: 100%; height: 100%;
    background-color: #FF0000;
    opacity: 0.5; /* 現代寫法替代 filter */
}

最佳實踐建議

1. 使用 CSS Reset / Normalize.css：專案起始即歸零所有元素 margin/padding，避免瀏覽器差異。
2. 避免濫用 absolute：若僅需填滿父容器，父容器 position:relative + 子元素 width:100%;height:100% 即可，無需 absolute。
3. 圖片垂直對齊：img { vertical-align: middle; } 或 display: block; 消除底部間隙。

修正後完整範例

<style>
.divcss5 {
    border: 1px solid #F00;
    width: 140px; height: 20px;
    position: relative; /* 為 absolute 子元素建立定位上下文 */
    margin: 0; padding: 0;
}
.divcss5 h3 {
    margin: 0;
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FF0000; opacity: 0.5;
}
.divcss5 img {
    width: 15px; height: 15px;
    vertical-align: middle;
}
</style>

<div class="divcss5">
    <h3></h3>
    <img src="icon.png" alt="">
</div>