內外邊距對行內元素塊級元素的影響
阿新 • • 發佈：2019-01-27
1、內邊距對父級元素的影響
當塊級元素裡面還是塊級元素且沒有定義寬高時，子塊級元素的內邊距會將父塊級元素撐開；
但是當子元素為行內元素的時候，內邊距對父級元素是無影響的。
如下例：
div和span的內邊距對父級div的影響
當腹肌元素限定了寬高時，子元素的內外邊距對父級元素都無影響，但是會出現溢位的情況。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .d1{ border: solid 1px red; } .d2{ border: solid 1px blue; padding: 100px; } a{ padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .s1{ border: 1px solid yellow; padding: 20px; } </style> </head> <body> <div class="d1"> <div class="d2">這是一段測試文字</div> </div> <div class="d1"> <span class="s1">這是一段測試文字</span> </div> </body> </html>
2、外邊距的特殊情況：
想要實現子元素在父元素中分離：
使用margin-top後卻是下面的效果：
這就是在（1）、第一個子元素的外邊距（2）、父級元素無邊框等的遮擋時會出現的情況。
解決辦法：
（1）、給父級元素新增透明邊框，但是會影響父級元素的尺寸，若想保持原有的尺寸，應在原有尺寸上減去邊框的尺寸；
（2）、父級元素新增<table></table>空元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .d1{ width: 200px; height: 200px; background-color: red; } .d2{ width: 100px; height: 100px; background-color: blue; margin:20px; } a{ padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .s1{ border: 1px solid yellow; padding: 20px; } </style> </head> <body> <div class="d1"> <div class="d2"></div> </div> </body> </html>