這篇文章給大家聊聊關于div的margin屬性，以及html中margin的用法對應的知識點，希望對各位有所幫助，不要忘了收藏本站哦。
margin是相對于div還是border
外邊距合并現象
如果兩個div上下排列，給上面div設置margin-bottom，給下面div設置margin-top，那么兩個margin會發生合并現象，會取較大的margin值。
注意：左右不會發生外邊距合并現象
上下塌陷現象
一個大盒子中包含一個小盒子，給小盒子設置一個margin-top，大盒子會一起向下平移。
注意：margin左右沒有塌陷現象。
margin是元素之間的距離。
div的邊界設置
方法：1、使用margin相關屬性給div設置外邊距（div盒子外圍四周的距離）；2、使用padding相關屬性給div設置內邊距（div盒子中裝載的內容到盒子邊緣（邊框）之間距離）。
本教程操作環境：windows7系統、CSS3&&HTML5版、DellG3電腦。
CSS外邊距（margin）
盒子的外邊距分為上右下左四個方向
外邊距的設定用來控制盒子外圍四周的距離，不屬于盒子本身范疇
外邊距的主要用途是控制盒子的位置，所以可以出現負值
怎么樣使div與屏幕有距離
使用{margin:toprightbottomleft}設置div間距。
如：{margin:10px20px30px40px}表示該元素與上面的元素相距10px，與右邊的元素相距20px，與下面的元素相距30px，與左邊的元素相距40px;
注意：
使用該屬性的時候要注意當上面元素的margin-bottom:10px;下面元素margin-top:10px;那么他們的間距將會合并，即他們之間的間距變為10px;如果這兩個值不一樣，那么瀏覽器將會取較大值。但是如果其中有一個元素設置position為absolute時，間距將不會合并。
使用該屬性時一定要注意與它相關的元素的屬性，注意觀察他們的position和float屬性。
div外邊距
1.我們新建一個html網頁文件，把他命名為test.html，接下來我們用test.html文件來講解css如何設置div外邊距。
2.在test.html文件內，要使用div標簽創建一行文字，并且把文字內容寫上“css如何設置div外邊距”。
3.給div標簽加上一個樣式，設置div標簽的class屬性為mybkkd。
4.編寫css樣式<styletype="text/css"></style>標簽，mybkkd樣式將寫在該標簽內。
5.在css標簽內，通過div標簽的class屬性mybkkd設置div外邊距。
6.在css樣式標簽里，在括號內，mybkkd的div設置css屬性樣式為margin:65px50px75px100px;意思是上外邊距是25px，右外邊距是50px，下外邊距是75px，左外邊距是100px
7.在瀏覽器瀏覽一下test.html，來看看效果能否實現。
注意事項
1、創建一個test.html頁面。
2、在test.html里，使用到div標簽創建一行文字，并加上樣式名稱。
3、在css中，將mybkkd的樣式為margin:65px50px75px100px;
div盒子留白怎么去掉
要去掉DIV盒子的留白，可以使用CSS屬性來設置盒子的邊距（margin）和內邊距（padding）為0。以下是一些方法：
設置margin和padding為0：
使用通用選擇器（*）重置所有元素的margin和padding：
請注意，這將會影響到所有的元素。
如果DIV盒子還有其他的樣式，可能需要進一步調整其他屬性，如border、box-sizing等。
另外，瀏覽器默認樣式也可能會對DIV盒子產生留白的影響。可以使用CSS的重置樣式表來消除默認樣式的影響，例如使用Normalize.css或ResetCSS等庫。這些庫可以提供一個統一的起點，以確保在不同瀏覽器上的一致性。
需要注意的是，去除DIV盒子的留白可能會影響布局和內容的展示，請根據實際需求和設計進行合適的調整。
Askmeanything...
Askmeanything...
div的margin屬性和html中margin的用法的問題分享結束啦，以上的文章解決了您的問題嗎？歡迎您下次再來哦！
