margin和padding的區(qū)別

margin和padding的區(qū)別

margin是指從自身邊框到另一個容器邊框之間的距離颓哮,就是容器外距離铃芦。(外邊距)

padding是指自身邊框到自身內(nèi)部另一個容器邊框之間的距離,就是容器內(nèi)距離。(內(nèi)邊距)

一商佑、margin

1、語法結(jié)構(gòu)

(1)padding-left:10px; /margin-left:10px;       ?   左內(nèi)/外邊距

(2)padding-right:10px; /margin-right:10px;?        右內(nèi)/外邊距

(3)padding-top:10px; /margin-top:10px;?      ? ?  上內(nèi)/外邊距

(4)padding-bottom:10px; /margin-bottom:10px;? ? ? ? ? ?  下內(nèi)/外邊距

(5)padding:10px;/ margin:10px;?  ? ? ? ? ? ? ? ? ? ? ? ?   ?四邊統(tǒng)一內(nèi)/外邊距

(6)padding:10px 20px; /margin:10px 20px;?        ?上下厢塘、左右內(nèi)/外邊距

(7)padding:10px 20px 30px;/margin:10px 20px 30px;?  ? ? ?上茶没、左右、下內(nèi)/外邊距

(8)padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上晚碾、右抓半、下、左內(nèi)/外邊距

2迄薄、可能取的值

(1)length 規(guī)定具體單位記的外邊距長度

(2)% 基于父元素的寬度的外邊距的長度

(3)auto 瀏覽器計算外邊距

?margin:0 auto琅关;? 只對塊級元素起作用

在塊元素中:?margin在塊級元素下煮岁,上下左右可以隨意設(shè)定讥蔽。

?在內(nèi)聯(lián)元素中:margin-top和margin-bottom對內(nèi)聯(lián)元素(對行)的高度沒有影響,如果你要改變內(nèi)聯(lián)元素的行高即類似文本的行間距画机,那 么你只能使用這三個屬性:line-height冶伞,fong-size,vertical-align步氏。請記住响禽,這個影響內(nèi)聯(lián)元素高度的是line-height而不是height。

?二、padding:

?注意:將Padding設(shè)置為負(fù)值無效:

?在塊元素中:padding在塊級元素下芋类,上下左右可以隨意設(shè)定隆嗅,會對元素內(nèi)部發(fā)生改變。

在內(nèi)聯(lián)元素中:行內(nèi)元素的padding元素侯繁,只有padding- left和padding-right有效果胖喳,上下不識別;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末贮竟,一起剝皮案震驚了整個濱河市丽焊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌咕别,老刑警劉巖技健,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異惰拱,居然都是意外死亡雌贱,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進(jìn)店門偿短,熙熙樓的掌柜王于貴愁眉苦臉地迎上來帽芽,“玉大人,你說我怎么就攤上這事翔冀〉冀郑” “怎么了?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵纤子,是天一觀的道長搬瑰。 經(jīng)常有香客問我,道長控硼,這世上最難降的妖魔是什么泽论? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮卡乾,結(jié)果婚禮上翼悴,老公的妹妹穿的比我還像新娘。我一直安慰自己幔妨,他們只是感情好鹦赎,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著误堡,像睡著了一般古话。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上锁施,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天陪踩,我揣著相機(jī)與錄音杖们,去河邊找鬼。 笑死肩狂,一個胖子當(dāng)著我的面吹牛摘完,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播傻谁,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼描焰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了栅螟?” 一聲冷哼從身側(cè)響起荆秦,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎力图,沒想到半個月后步绸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡吃媒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年瓤介,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赘那。...
    茶點(diǎn)故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡刑桑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出募舟,到底是詐尸還是另有隱情祠斧,我是刑警寧澤,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布拱礁,位于F島的核電站琢锋,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏呢灶。R本人自食惡果不足惜吴超,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望鸯乃。 院中可真熱鬧鲸阻,春花似錦、人聲如沸缨睡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽宏蛉。三九已至遣臼,卻和暖如春性置,著一層夾襖步出監(jiān)牢的瞬間拾并,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嗅义,地道東北人屏歹。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像之碗,于是被迫代替她去往敵國和親蝙眶。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 本文導(dǎo)讀:padding margin都是邊距的含義褪那,關(guān)鍵問題得明白是什么相對什么的邊距.padding是控件的內(nèi)...
    隨風(fēng)化作雨閱讀 6,939評論 0 3
  • 在CSS中margin是指從自身邊框到另一個容器邊框之間的距離幽纷,就是容器外距離。在CSS中padding是指自身邊...
    hoveyxu閱讀 11,633評論 0 6
  • 一博敬、padding 1友浸、語法結(jié)構(gòu) (1)padding-left:10px; 左內(nèi)邊距(2)padding-rig...
    街角仰望閱讀 580評論 0 0
  • 什么是盒子? CSS處理網(wǎng)頁時偏窝,它認(rèn)為每個元素都包含在一 個不可見的盒子里收恢。 我們只需要將相應(yīng)的盒子擺放到網(wǎng)頁中相...
    咻咻咻滴趙大妞閱讀 921評論 0 0
  • 上課的時候奶奶給我打電話。我正在努力的忍著想上廁所的感覺上課祭往。立馬掛了電話去廁所給奶奶打電話伦意,奶奶問我冷不冷讓我多...
    夏木yi閱讀 342評論 0 3