css margin屬性,css margin屬性怎么用?css margin屬性用法教程

在css中,有一個重要的屬性margin,很多人都不知道css margin屬性是什么?怎么用,下面為您總結一下css margin屬性用法教程。

2a2a5b439f06083da79d1f1b254b7886.png

margin是css用于在一個聲明中,對所有css margin屬性的簡寫,正因為margin來控制css中的塊級元素之間的距離,所以兩者是不是可見的。【推薦學習:CSS3教程】

一:css margin屬性怎么用

margin屬性包含了很多的屬性,如下所示:

margin left :是表示設置距左內邊距;

margin top:是表示設置頭頂元素塊狀的距離;

margin right:是表示設置距右元素塊距離;

margin bottom :是表示設置底部塊狀距離

二:css margin屬性用法教程

1.margin left用法:

margin left:50px;語法后面緊跟著數字或者百分比,該語法表示距離左邊元素塊50像素點,或者距離元素50%的距離。

為了觀察實例,我們使用兩個盒子:

margin-left實例 www.divcss5.com

.php-a,.php-b

{float:left; width:150px; height:120px; border:1px solid #F00}

.php-b{ margin-left:50px}

.php-c{ margin-left:50px}

我們可以改動數值,可以觀察其中變化,但是效果都是元素左邊間距的位置大小。

2.margin right用法恰恰和margin left相反,定義為右邊元素距離多少像素。

3.margin top:50px,語法后面緊跟數字,就是表示上邊間距50個像素點,也可以使用百分比來表示。

4.margin bottom用法和margin top用法類似,并且在方向是相反的。

假如我們想在上下左右都用margin:10px來表示,margin我們要按照順時針轉法的思維就好了。【推薦閱讀:margin:auto屬性的用法詳解】

以上就是對css margin屬性怎么用?css margin屬性用法教程的全部介紹,如果您想了解更多有關CSS3視頻教程,請關注PHP中文網。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/260945.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/260945.shtml
英文地址,請注明出處:http://en.pswp.cn/news/260945.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

對于.swp文件的恢復方法

今天在使用Secure CRT在局域網內遠程服務器上編程時出了小狀況。在文件沒有保存的情況下,網線斷了。 然后等我重連上去后發現,剛剛編寫的程序不見了。用命令:ll 發現在目錄下有一個同名的.xxxx.c.swp文件。 通過這個文件,可以恢復程序。 恢復…

bzoj1679[Usaco2005 Jan]Moo Volume 牛的呼聲*

bzoj1679[Usaco2005 Jan]Moo Volume 牛的呼聲 題意: N只牛,每只牛都與其他N-1只牛聊著天。一個對話的進行,需要兩只牛都按照和她們間距離等大的音量吼叫,計算音量和。N≤10000 題解: 第i只牛與前i-1只牛對話的音量和是…

gaia引擎分析(二)場景管理

只是粗略的分析原理,大蝦輕噴~~ Gaia引擎中沒有場景管理器(scenemanager)這種東西,但是并不是沒有場景管理,而是在cGameHost類中有一課場景樹進行場景組織、一棵四叉樹用來進行剪裁。 class cGameHost class cGameHos…

ajax登錄非空判斷,email ajax傳輸數據去重和非空判斷(示例代碼)

前臺:ajax:$(document).ready(function(){$("#email").blur(function(){$("#email").css("background-color","#D6D6FF");$.ajax({type:"post",url:"check_email.do",data:{‘email‘:$("#email&…

某些專題頁面內容很好,但很長時間都不被及時收錄的可能原因之一

專題未被百度及時收錄的問題,經檢查驗證后發現就是因為頁面未建成就放置在線上,并返回404狀態碼,被百度當成死鏈刪除,造成收錄和流量損失。轉載于:https://www.cnblogs.com/adu0409/p/3499350.html

C++.Templates學習總結歸納1

函數模板 首先我們來看看函數模板,一個函數模板(function template)代表一族函數,其表現和一般的函數一樣,只是其中的某些元素在編寫的時候還不知道,也就是說這些還不知道的元素,我們將其參數化…

選擇更安全的方式執行你的puppet更新

選擇更安全的方式執行你的puppet更新生產環境中,puppet的更新有需要節點自動更新的,有需要通過puppetmaster推送更新的,還有需要節點更新時間離散的。下面講解三種更新方式2.7 Puppet更新方式2.7.1 節點定時更新[rootagent1 ~]# vim /etc/pup…

c ajax定時獲取,ajax的定時調用每5秒調用一次

這篇文章主要介紹了關于ajax的定時調用,本例為每5秒調用一次,大家可以根據自己的需求更改代碼如下:function initXMLRequest(){if (window.ActiveXObject) {xmlRequest new ActiveXObject("Microsoft.XMLHTTP");} else {if (window.XMLHttpRe…

[C++]有關深復制與copy constructor的一些問題與實例

紙上得來終覺淺,絕知此事要躬行 --- 今天對此話有了實際的領悟。之前學習C的時候,自以為已經把深復制和復制構造函數等這些知識已經掌握了,但真正寫起項目來的時候,還是不能提前考慮這些問題,直到問題出現,…

Xml Tips

Xml Tips//z 2012-3-7 16:43:47 PM IS2120CSDN1. xml 中的注釋<!-- 這是注釋 -->并非用于 XML 分析器的內容&#xff08;例如與文檔結構或編輯有關的說明&#xff09;可以包含在注釋中。注釋以 <!-- 開頭&#xff0c;以 --> 結尾&#xff0c;例如<!--catalog la…

算法復雜度為O(N) 的排序算法

題目&#xff1a;某公司有幾萬名員工&#xff0c;請完成一個時間復雜度為O(n)的算法對該公司員工的年齡作排序&#xff0c;可使用O(1)的輔助空間。分析&#xff1a;排序是面試時經常被提及的一類題目&#xff0c;我們也熟悉其中很多種算法&#xff0c;諸如插入排序、歸并排序、…

OpenJudge計算概論-字符串排序

/* 字符串排序 總時間限制: 1000ms 內存限制: 65536kB 描述 參考整數排序方法&#xff0c;設計一種為字符串排序的算法&#xff0c;將字符串從小到大輸出 輸入 第一行為測試數據組數t, 后面跟著t組數據。每組數據第一行是n&#xff0c;表示這組數據有n行字符串&#xff0c;接下…

Window7+vs2008+QT環境搭建

記錄下自己是如何搭建QT開發環境的&#xff0c;備忘吧。操作系統&#xff1a;win7&#xff0c;其實winXP&#xff0c;win7都沒有關系&#xff1b;我使用的機器安裝的操作系統是win7&#xff1b;開發環境是VS&#xff0c;使用2005,2008,2010或者即將發布的2011都行&#xff1b;因…

history命令

1. 歷史命令不會無休止的保存下去&#xff0c;默認的最大保存量為1000條輸入&#xff1a;echo $HISTSIZE1000條從profile文件中定義的&#xff0c;可以在里面修改保存數量。/etc/profile用于整個系統所有用戶&#xff0c; ~/.bash_profile, ~/.profile和~/.bashrc 用于各個用戶…

Javascript創建對象的幾種方式?

javascript 中常見的創建對象的幾種方式&#xff1a; 1. 使用Object構造函數創建&#xff1b; 使用Object構造函數來創建一個對象&#xff0c;下面代碼創建了一個person對象&#xff0c;并用兩種方式打印出了Name的屬性值。 var person new Object(); person.name"kevin&…

使用DIV之后 table何去何從

表格并非雞肋 相反是一道大餐 XHTML標準中的一些元素分為三大類&#xff1a; 輔助布局設計元素&#xff1a;DIV SPAN 這類元素的主要功能是用來布局整個頁面的&#xff0c;靈活使用這些元素的各種屬性&#xff0c;可以讓你的頁面表現豐富多彩。結構化元素或信息元素&#xff1…

使用 RMAN 同步數據庫

使用 RMAN 同步數據庫使用 RMAN 同步數據庫一&#xff0e;概述二 操作步驟(一)&#xff0e;把生產庫置為歸檔模式(二).啟動rman做數據庫0級備份(三)&#xff0e;修改生產庫數據庫到未歸檔(四)&#xff0e;拷貝備份集到測試庫(五).在測試庫上的操作一&#xff0e;概述 因項目組遇…

解決 用戶'sa'登錄失敗。錯誤:18456 問題

問題描述&#xff1a;用戶sa登錄失敗。錯誤:18456 產生原因&#xff1a;由于服務器身份驗證模式為‘Windows 身份驗證模式’&#xff0c;所以導致登錄失敗 解決方案&#xff1a; 1.使用‘Windows 身份驗證模式’登錄服務器 2.打開‘對象資源管理器’&#xff0c;右鍵根節點…

js實現圖片上傳預覽及進度條

js實現圖片上傳預覽及進度條 原文js實現圖片上傳預覽及進度條 最近在做圖片上傳的時候&#xff0c;由于產品設計的比較fashion&#xff0c;上網找了比較久還沒有現成的&#xff0c;因此自己做了一個&#xff0c;實現的功能如下&#xff1a; 1&#xff1a;去除瀏覽器<input …

webapi文檔描述-swagger

最近做的項目使用mvcwebapi&#xff0c;采取前后端分離的方式&#xff0c;后臺提供API接口給前端開發人員。這個過程中遇到一個問題后臺開發人員怎么提供接口說明文檔給前端開發人員,最初打算使用word文檔方式進行交流&#xff0c;實際操作中卻很少動手去寫。為了解決這個問題&…