溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章跟大家分析一下“DIV CSS margin-right原理與用法是什么”。內容詳細易懂，對“DIV CSS margin-right原理與用法是什么”感興趣的朋友可以跟著小編的思路慢慢深入來閱讀一下，希望閱讀后能夠對大家有所幫助。下面跟著小編一起深入學習“DIV CSS margin-right原理與用法是什么”的知識吧。
DIV CSS margin-right設置對象盒子右邊外邊距（間距）
1、margin-right作用：盒子對象設置此樣式后，此對象邊框外將靠右產生距離
2、margin-right語法：
margin-right:10px 設置對象右側外間距為10px
3、margin-right示意圖
設置margin-right效果示意圖
1和2兩個盒子未設置margin樣式，當給予3設置margin-right值后出現3和4之間產生間距。
4、css margin-right實例
為了觀察效果，首先DIVCSS5設置兩個DIV盒子分別加上相同寬度、高度、邊框等樣式，為了讓DIV并排億速云設置div浮動float:left靠左觀察兩個盒子情況，然后再對第一個盒子加上margin-right:15px看看效果。
1）、未添加margin樣式完整HTML+CSS代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>margin-right DIVCSS5實例</title> <style> .div-a,.div-b{ float:left; width:200px; height:100px; border:1px solid #F00} /* CSS注釋說明：以上代碼代表.div-a和.div-b共用花括號里CSS樣式 */ </style> </head> <body> <div class="div-a"></div> <div class="div-b"></div> </body> </html>2）、未添加margin-right效果截圖
未設置div margin-right效果截圖
3）、對".div-a"設置margin-right樣式代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>margin-right DIVCSS5實例</title> <style> .div-a,.div-b{ float:left; width:200px; height:100px; border:1px solid #F00} /* CSS注釋說明：以上代碼代表.div-a和.div-b共用花括號里CSS樣式 */ .div-a{ margin-right:15px} </style> </head> <body> <div class="div-a"></div> <div class="div-b"></div> </body> </html>4）、對".div-a"設置margin-right樣式效果截圖
設置margin-right效果截圖
從以上實例效果截圖對“.div-a”設置margin-right樣式可以實現盒子間距效果。
css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
關于DIV CSS margin-right原理與用法是什么就分享到這里啦，希望上述內容能夠讓大家有所提升。如果想要學習更多知識，請大家多多留意小編的更新。謝謝大家關注一下億速云網站！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
