搜尋
首頁web前端html教學css margin外边距使用实例分析

margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧,紧贴于边框,marign与padding位置却相反css padding却是紧贴边框位于边框内侧。

 

一、margin基础语法与结构

外边距指CSS单词margin,margin是设置对象四边的外延边距,没有背景颜色也无颜色。

1、margin语法

<code class="language-css">Margin:10px</code>

Margin的值是数字+html单位,同时也可以为auto(自动、自适应)

2、应用结构

<code class="language-css">Div{margin:10px}</code>

设置div对象四边间距为10px

3、Margin说明

margin是设置对象外边距外延边距离。

margin的值有三种情况,可以为正整数和负整数并加单位如PX像素(margin-left:20px);可以为auto自动属性(margin-left:auto 自动);可以为百分比(%)值(margin-left:3%)。

Margin延伸(单独设置四边间距属性单词)
margin-left 对象左边外延边距 (margin-left:5px; 左边外延距离5px)
margin-right 对象右边外延边距 (margin-right:5px; 右边外延距离5px)
margin-top 对象上边外延边距 (margin-top:5px; 上边外延距离5px)
margin-bottom 对象下边外延边距 (margin-bottom:5px; 下边外延距离5px)

 

二、css margin缩写简写

css margin属性,如遇到上下、左右、上下左右等情况我们可以缩写简写优化。

1、只有上下情况缩写
原始:margin-top:5px; margin-bottom:6px
缩写简写为:margin:5px 0 6px 0或margin:5px auto 6px auto

2、只有左右情况缩写
原始:margin-left:5px; margin-right:6px
缩写简写为:margin:0 6px 0 5px或margin:auto 6px auto 5px

3、只有三边情况缩写
原始:margin-top:5px; margin-bottom:6px; margin-left:4px
缩写:margin:5px 0 6px 4px或margin:5px auto 6px 4px

4、四边相同值缩写
原始:margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px
缩写:margin:5px;

5、四边不同值缩写
原始:margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px
缩写:margin:5px 8px 6px 7px;

6、四边其中上下值和左右值各相同缩写

上下相同、左右相同原始:margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px
缩写:margin:5px 7px;

 

三、常用的margin样式

1、用margin设置对象盒子间距

我们常用margin设置2个盒子之间距离,无论上下左右的距离我们均可以利用margin实现间隔。

2、利用margin实现布局居中,基础单词:

<code class="language-css">marign:0 auto;</code>

即可实现对象居中,但需要一个条件,那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式,其下级包含对象设置了margin:0 auto也会让其布局居中,但为了兼容各大浏览器建议对body设置一个text-align:center属性样式。

 

四、css margin案例

文本的上边距设置使用厘米值

这个例子演示了如何设置一个使用厘米值的文本的顶部margin。

<code class="language-html">


<style>
p.ex1 {margin-top:2cm;}
</style>




<p>A paragraph with no margins specified.</p>
<p class="ex1">A paragraph with a 2cm top margin.</p>
<p>A paragraph with no margins specified.</p>


</code>

在线运行

 

五、css margin总结

Margin样式是设置对象与对象之间间距,单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性,margin是设置盒子对象之间间距,一般设置时候注意margin简写优化。多实践并观察案例理解了margin作用即可很快上手使用margin。

margin缺点:在使用CSS margin的时候容易造成CSS HACK。IE6解释此属性的时候容易造成双倍距离。您可能需要了解CSS兼容浏览器知识。

 

相关阅读:

CSS 教程

CSS3 教程

CSS 参考手册

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML文檔中的根標籤是什麼?HTML文檔中的根標籤是什麼?Apr 29, 2025 am 12:10 AM

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent,確保properdocumentstrumentstrumentsureandbrowserparserparsing。

HTML標籤和元素是同一件事嗎?HTML標籤和元素是同一件事嗎?Apr 28, 2025 pm 05:44 PM

文章解釋說,HTML標籤是用於定義元素的語法標記,而元素是完整的單位,包括標籤和內容。他們一起工作以構建網頁。查拉克計數:159

&lt; head&gt;的意義是什麼。 &&lt;身體&gt;在html中標記?&lt; head&gt;的意義是什麼。 &&lt;身體&gt;在html中標記?Apr 28, 2025 pm 05:43 PM

本文討論了Lt; Head&gt; &&lt;身體&gt; HTML中的標籤,它們對用戶體驗的影響以及SEO的影響。正確的結構增強了網站功能和搜索引擎優化。

&lt; strong&gt;,lt; b&gt;有什麼區別標籤和lt; em&gt;,&lt; i&gt;標籤?&lt; strong&gt;,lt; b&gt;有什麼區別標籤和lt; em&gt;,&lt; i&gt;標籤?Apr 28, 2025 pm 05:42 PM

本文討論了HTML標籤,和和關注其語義與表現用途及其對SEO和可訪問性的影響之間的差異。

請說明如何指示HTML中文檔使用的字符集?請說明如何指示HTML中文檔使用的字符集?Apr 28, 2025 pm 05:41 PM

文章討論了在HTML中指定字符,重點介紹了UTF-8。主要問題:確保正確顯示文本,防止亂七八糟的字符,並增強SEO和可訪問性。

HTML中的各種格式標籤是什麼?HTML中的各種格式標籤是什麼?Apr 28, 2025 pm 05:39 PM

本文討論了用於構建和造型Web內容的各種HTML格式標籤,強調了它們對文本外觀的影響以及語義標籤對可訪問性和SEO的重要性。

HTML元素的' ID”屬性與'類”屬性之間有什麼區別?HTML元素的' ID”屬性與'類”屬性之間有什麼區別?Apr 28, 2025 pm 05:39 PM

本文討論了HTML的“ ID”和“類”屬性之間的差異,重點是它們的獨特性,目的,CSS語法和特異性。它解釋了它們的使用如何影響網頁樣式和功能,並為

HTML中的'類”屬性是什麼?HTML中的'類”屬性是什麼?Apr 28, 2025 pm 05:37 PM

本文解釋了HTML“類”屬性在分組樣式和JavaScript操縱元素中的作用,將其與唯一的“ ID”屬性進行對比。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具