margin和padding的區別和用法

来源:https://www.cnblogs.com/CcPz/archive/2018/01/03/8185489.html
-Advertisement-
Play Games

margin和padding的區別和用法 什麼是margin、padding? marigin:就是外邊距。padding:就是內邊距。怎麼就容易記住兩者呢? 馬蓉大家都知道吧,給王寶強帶帽子的那位,假如你認識了馬蓉是不是想離他遠點呢?而馬蓉的拼音是marong,是不是和margin特別像呢?那麼你 ...


margin和padding的區別和用法

什麼是margin、padding?

  marigin:就是外邊距。padding:就是內邊距。怎麼就容易記住兩者呢?

  馬蓉大家都知道吧,給王寶強帶帽子的那位,假如你認識了馬蓉是不是想離他遠點呢?而馬蓉的拼音是marong,是不是和margin特別像呢?那麼你看著maring是不是就知道了margin是外邊距呢?

  那麼padding就更容易記住了,panda是熊貓大家都是知道吧,熊貓是我們中國的國寶而且都很可愛,所以看見padding就知道了是內邊距是吧。

margin和padding的用法

margin-top 設置元素的上外邊距
padding-top 設置元素的上內邊距
margin-left 設置元素的左外邊距
padding-top 設置元素的左內邊距
margin-right 設置元素的右外邊距
padding-right 設置元素的右內邊距
margin-bottom 設置元素的下外邊距
padding-bottom 設置元素的下內邊距

除了這幾種方法外還有其他的方法嗎?

  當然是有的,margin和padding都是簡寫屬性他們可以直接在裡面設置他們的屬性。即:margin/padding:值 。但是這個樣子寫的話都把所有的值都設置了還能讓其他的值都單個的寫嗎?方法是有的:

  1. margin/padding:值1 值2 值3 值4   //設置元素上右下左的內/外邊距
  2. marign/padding:值1 值2      //設置元素上下左右的內/外邊距
  3. marign/padding:值1 值2 值3    //設值元素左右的內外邊距

當我寫的margin/padding寫的沒毛病的時候他沒有給我顯示出來我想要的結果是什麼情況?

  這種情況出現的時候請你先檢查你的代碼是否有問題,若是代碼沒有問題的話就是出現了BUG。那麼該如何解決的?

  當你的margin出現問題的時候只要在父元素中加入overflew:hidden 就可以解決它的問題。但是當你的父元素出現溢出情況的時候就回隱藏。

  當你的padding出現問題的時候只要在元素中加入box-sizing:border-box 就可以解決它的問題

  當然還有其他的方法回去除bug的問題我在這裡給寫的是最簡單的方法,不喜勿噴。謝謝

  


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.1 基本介紹 我們先去github上面瞭解它https://github.com/alibaba/AndFix 請原諒我的盜圖行為,英文解釋我就不貼了我自己也看不懂,大致的意思的就是要想盡一切辦法給導致我們崩潰的那個類的某個方法去動手術把它弄好,而這裡就有一個概念那就AndFix.apatch補 ...
  • 開篇三問 1. AJAX請求真的不安全麽? 2. AJAX請求哪裡不安全? 3. 怎麼樣讓AJAX請求更安全? 前言 本文包含的內容較多,包括AJAX,CORS,XSS,CSRF等內容,要完整的看完並理解需要付出一定的時間。 另外,見解有限,如有描述不當之處,請幫忙及時指出。 __正文開始...__ ...
  • [1]數據結構 [2]圖的表示 [3]創建Graph類 [4]圖的遍歷 [5]最短路徑演算法 [6]最小生成樹 ...
  • 選擇器實例選取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") class="intro" 的所有元素 .class,.class $(".intro,.demo") class 為 "intro" 或 "d ...
  • [1]數據結構 [2]二叉樹 [3]樹的遍歷 [4]樹的搜索 [5]自平衡樹 ...
  • 本文寫給有一定Promise使用經驗的人,如果你還沒有使用過Promise,這篇文章可能不適合你,建議先瞭解Promise的使用 Promise標準解讀 1.只有一個then方法,沒有catch,race,all等方法,甚至沒有構造函數 Promise標準中僅指定了Promise對象的then方法的 ...
  • 在使用Promise處理一些複雜邏輯的過程中,我們有時候會想要在發生某種錯誤後就停止執行Promise鏈後面所有的代碼。 然而Promise本身並沒有提供這樣的功能,一個操作,要麼成功,要麼失敗,要麼跳轉到then里,要麼跳轉到catch里。 如果非要處理這種邏輯,一般的想法是拋出一個特殊的Erro ...
  • 最近在逛各大網站,論壇,以及像SegmentFault等編程問答社區,發現Vue.js異常火爆,重覆性的提問和內容也很多,樓主自己也趁著這個大前端的熱潮,著手學習了一段時間的Vue.js,目前用它正在做自己的結業項目。 在做的過程中也對Vue.js的官方文檔以及其各種特性有了許多認識。作為一個之前以 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...