CSS3之margin和padding區別

開心一笑

夕陽西下,我扶著八萬多一平米房子的陽臺扶手,抽著煙,看著眼前花了一百多萬裝修的豪華游泳池,思緒萬千。
人活著究竟為了什么?錢,還是權?有錢有權之后呢?難道就沒有了追求嗎?
我陷入了深深的思索中。這時身后走來一位美麗動人的少婦,對我說:師傅,水管修好了嗎?……[捂嘴]

提出問題

margin和padding區別在哪里呢???

解決問題

本身不是做前端開發的,這兩個樣式自己也搞不清楚,但碰到問題了,
總得去解決,糾結是沒用的. 希望寫完這篇博客,能徹底吧它弄明白,
這樣目的就達到了,同時可以幫助更多的人,動手吧,攻城師們.....

margin: 外邊距

padding:內邊距

實例一:

<html>
<body>
<body>
<div style="border: solid;width:300px;height:300px">
    <div style="
        border: solid;
        width: 99px;
        height: 99px;
        padding-left: 30px;
        padding-top: 30px;
        margin: 100px;">
        div2
    </div>
</div>
</body>
</body>
</html>

很明顯,在圖中:
1就是:margin: 100px
2就是:padding-left: 30px


這里寫圖片描述

實例二:

看看上面代碼在google瀏覽器的樣子:


這里寫圖片描述

其他:

(1)padding-left:10px; 左內邊距
(2)padding-right:10px; 右內邊距
(3)padding-top:10px; 上內邊距
(4)padding-bottom:10px; 下內邊距
(5)padding:10px; 四邊統一內邊距
(6)padding:10px 20px; 上下、左右內邊距
(7)padding:10px 20px 30px; 上、左右、下內邊距
(8)padding:10px 20px 30px 40px; 上、右、下、左內邊距

(1)margin-left:10px; 左外邊距
(2)margin-right:10px; 右外邊距
(3)margin-top:10px; 上外邊距
(4)margin-bottom:10px; 下外邊距
(5)margin:10px; 四邊統一外邊距
(6)margin:10px 20px; 上下、左右外邊距
(7)margin:10px 20px 30px; 上、左右、下外邊距
(8)margin:10px 20px 30px 40px; 上、右、下、左外邊距

上面內容,引用不知名高手文章:
http://www.studyofnet.com/news/35.html

個人感悟

雖然內容很簡單,但是一折騰,發現就都明白了。說明:人或者事,基本都是折騰出來的

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 本文導讀:padding margin都是邊距的含義,關鍵問題得明白是什么相對什么的邊距.padding是控件的內...
    隨風化作雨閱讀 6,948評論 0 3
  • 在CSS中margin是指從自身邊框到另一個容器邊框之間的距離,就是容器外距離。在CSS中padding是指自身邊...
    hoveyxu閱讀 11,660評論 0 6
  • 一、padding 1、語法結構 (1)padding-left:10px; 左內邊距(2)padding-rig...
    街角仰望閱讀 596評論 0 0
  • http://www.hicss.net/do-not-tell-me-you-understand-margin...
    lmem閱讀 602評論 0 0
  • 親愛的爸爸 兒童節這天迎來了艷陽天 畫里爸爸的背影媽媽的菜肴 爺爺的風箏奶奶的糖果 在心情好的時候看更覺得溫馨 南...
    甘小蜻閱讀 198評論 0 0