padding對於margin的影響簡單介紹
可能很多初學者對於padding是否會影響到margin外邊距還不太清楚。
只要寫段程式碼測試一下就可以知道了,先看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:150px; height:150px; background-color:green; padding:10px; } #inner{ width:50px; height:50px; background:red; } </style> </head> <body> <div id="box"> <div id="inner"></div> </div> </body> </html>
上面的程式碼是沒有外邊距的時候,下面再看加上外邊距的情況,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:150px; height:150px; background-color:green; padding:10px; } #inner{ width:50px; height:50px; background:red; margin-left:10px; } </style> </head> <body> <div id="box"> <div id="inner"></div> </div> </body> </html>
從上面的程式碼表現可以看出,padding對margin外邊距是有影響的。
相關文章
- padding和margin對於position定位的影響padding
- margin引數簡單介紹
- margin 引數簡單介紹
- padding對於元素position定位的影響padding
- 負外邊距margin對於絕對定位元素的影響
- 絕對定位對margin外邊距的影響
- margin為負值對佈局的影響
- 負外邊距margin對寬度的影響
- 負外邊距margin對浮動元素的影響
- css對於小數尺寸值的解讀簡單介紹CSS
- 關於 React Hooks 的簡單介紹ReactHook
- java關於事件的簡單介紹Java事件
- 關於C語言的簡單介紹C語言
- javascript對於值型別資料的物件包裝簡單介紹JavaScript型別物件
- margin-top影響父元素定位
- javascript變數作用於簡單介紹JavaScript變數
- offsetTop屬性值不受padding的影響padding
- 關於PHP檔案操作的簡單介紹PHP
- Webpack 的簡單介紹Web
- Promise的簡單介紹Promise
- CFRunloopObserverRef 的簡單介紹OOPServer
- margin與padding的區別padding
- 關於LOL成就係統對玩家影響的簡略分析
- 遊戲暗示對於遊戲玩家的影響遊戲
- 關於OPcache對Swoole影響的理解opcache
- JAVA 異常對於效能的影響Java
- 關於drop操作對role的影響
- SVG簡單介紹SVG
- HTML簡單介紹HTML
- ActiveMQ簡單介紹MQ
- HTML 簡單介紹HTML
- JavaScript 簡單介紹JavaScript
- CSS 簡單介紹CSS
- SCSS 簡單介紹CSS
- UICollectionView 簡單介紹UIView
- css簡單介紹CSS
- dble簡介及相對於MyCAT的優勢方面的介紹
- SpringMvc的簡單介紹SpringMVC