margin-top的坑
下面有一段程式碼
HTML部分
<div class="jd_header_content">
<a href="#" class="icon_logo"></a>
<form action="#">
<span class="icon_search"></span>
<input type="search">
</form>
<a href="#" class="login">登入</a>
</div>
CSS部分
.jd_header_content{
height: 100%;
min-width: 300px;
max-width: 640px;
margin: 0 auto;
position: relative;
background-color: rgba(201,21,35,0.85);
}
.jd_header_content form{
margin-top: 5px;
padding-left: 75px;
padding-right: 65px;
width: 100%;
height: 30px;
}
就會出現問題如圖
![5121203-886bba4b2b958eab.png](https://upload-images.jianshu.io/upload_images/5121203-886bba4b2b958eab.png)
Paste_Image.png
原本打算是讓form與頂部有5px的間距,但是不但沒有出現,還使父標籤的頂部出現了5px的間距。
這是因為當兩個div盒子在巢狀的時候,如果鬥使用了margin-top(margin-bottom)的時候1.這個margin-top的值會被層疊到外層的div上面。2.取兩個之中的較大值。就像上面這個例子中的,父標籤margin-top 的值是0,子標籤的margin-top的值是5px,那麼這個就會取5px這個值。
這種情況只會出現在垂直方向,再水平方向不會出現這種情況。
相關文章
- margin-top使用需要注意的地方
- margin-top影響父元素定位
- 將子元素的margin-top傳遞給父元素
- 為什麼margin-top不起作用
- 為什麼margin-top對父元素有效
- 為什麼margin-top不是作用於父元素
- 子元素的margin-top作用於外層父元素解決方法
- margin-top失效傳遞給父元素解決方案
- CSS(margin)問題巢狀div中margin-top轉移CSS巢狀
- Mac 下打包APK的血淚坑(巨坑,巨巨坑,史前巨坑)MacAPK
- 坑!坑!坑!那些年運營犯過的錯誤
- httpd的坑httpd
- 我的坑
- sqlserver的坑SQLServer
- UITableView的坑UIView
- lua的for的坑
- 坑爹的Python陷阱(避坑指南)Python
- 坑四:利用json模組時遇到的坑JSON
- mpvue遇到的坑Vue
- golang的踩坑Golang
- Golang for range的坑Golang
- vue的Array坑Vue
- ios,framework的坑iOSFramework
- unity destory的坑Unity
- 又踩坑了!BigDecimal使用的5個坑!Decimal
- 踩了的Dockerfile的坑Docker
- 小程式 遇到的坑
- php要小心的坑PHP
- RSA加密遇到的坑加密
- Laravel Excel 遇到的坑LaravelExcel
- UICollectionView間隙的坑UIView
- Android WebView的坑AndroidWebView
- NSString 遇到的坑
- WKWebview 的使用及坑WebView
- 使用dataX遇到的坑
- Go語言的”坑“Go
- GeoServer 踩過的坑Server
- Laravel Session 遇到的坑LaravelSession