`

margin 属性学习--20131030

 
阅读更多
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

margin:10px 5px 15px 20px;


最基础的用法 用来调节上下左右的间距

margin:10px 5px 15px;


这个是调节上10px 下15px 左右个5px

margin:10px 5px;


这个是上下10px 左右5px

margin:10px;


上下左右都是 10px

浏览器支持:所有浏览器都支持 margin 属性。

auto 浏览器计算外边距。
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。

margin 值可以是

百分比基于父对象总高度或宽度的百分比
长度值定义一个固定的边距
auto浏览器设定的值

分享到:
评论

相关推荐

    css中margin属性详细分析.docx

    在CSS中,margin属性是一个至...总之,理解并熟练掌握CSS中的margin属性是每个前端开发者的基本功,它涉及到元素布局、间距控制以及视觉设计等多个方面,通过深入学习和实践,我们可以创建出更加灵活和美观的网页布局。

    css中margin属性详细分析 (2).pdf

    《CSS中的margin属性详解》 在CSS样式设计中,margin属性是不可或缺的一部分,它用于定义元素周围的空白区域,也就是我们常说的外边距。通过合理使用margin,我们可以精确地控制元素之间的距离,从而达到良好的视觉...

    CSS3新属性transition-property transform box-shadow实例学习

    CSS3新属性2013-05-21</title> <style> .test li:hover{border-color:#999;background-color:#bbb;color:#999;} .text{ margin:5px;float:left; background:#FFF; height:250px; width:200px; border:1...

    css中padding、margin两个重要属性的详细介绍及举例说明

    ### CSS中的Padding与Margin属性详解 #### 一、引言 在前端开发中,CSS(层叠样式表)是用于定义HTML文档外观的核心技术之一。其中,`padding`与`margin`是两个至关重要的属性,它们直接影响着网页元素的空间布局...

    CSS深入学习之让你认识不一样的margin

    CSS中margin属性是我们进行页面布局时经常接触的一个重要属性,它主要用来定义元素的外边距。为了深入理解margin,文章从几个方面详细介绍了margin的用法和常见问题。 首先,文章对margin的基本概念进行了讲解。...

    CSS的margin属性在页面布局中的使用攻略

    CSS的margin属性是CSS中的一个核心概念,主要用来控制元素与其周围元素的间距。通过合理使用margin属性,可以有效实现页面的布局设计,让页面内容按照设计者的要求进行排列。 首先,margin属性涉及到HTML元素的宽高...

    XML应用开发(软件品牌)-1期 4.7 案例分析-使用CSS容器属性显示XML文档-盒模型.doc

    例如,使用XPath或CSS Selectors选取特定的XML元素,然后用上述的margin、border和padding属性来调整它们的外观。 总结起来,XML应用开发中的CSS盒模型技术是提升用户体验和视觉效果的关键工具。通过理解并运用盒...

    css2中文手册 学习css的必选

    这个是学习css 必须要有的手册,里面包含了大部分css的属性,规则,下面是大纲 CSS Properties Reference 样式表属性 字体 Font font color font-family font-size font-size-adjust font-stretch font-style ...

    页面样式调试必备-style属性

    - `margin`: 设置元素周围的空间,可以接受四个值分别对应上、右、下、左的边距。 - `padding`: 设置元素内部的空间,同样可以接受四个值来分别设定。 **布局属性**: - `clear`: 控制元素是否应出现在浮动元素的...

    CSS重要属性之 margin 属性知识大整合(必看篇)

    二是把知识分享出来,避免各位对margin属性的误解。内容可能会有点多,但都是精华,希望大家耐心学习。 以下的分享会分为如下内容: 1.margin 属性的简单介绍  1.1:普通流的 margin 百分比设置  1.2:绝对定位的 ...

    网页学习-DIV篇

    3. CSS定位:通过设置宽度、高度和margin属性来调整元素的位置和大小。 通过这样的步骤,我们可以创建出网页的基础框架。保存并用浏览器打开文件,就可以看到预设的布局结构。随着进一步的学习和实践,可以添加更多...

    margin负值之美

    在网页设计和开发中,`margin` 是一个非常重要的CSS属性,用于设置元素与周围元素的距离,即内外边距。而“margin负值之美”这个主题则深入探讨了如何巧妙利用负值`margin`来实现一些特殊的布局效果和设计创新。在...

    css属性表与用法

    ### CSS属性表与用法详解 #### 一、概述 ...它能够实现网页的表现与内容分离,增强页面的灵活性和可维护性。本文档将详细介绍CSS中的常见属性及其用法,方便开发者快速查阅。...希望本指南能为您的CSS学习之旅提供帮助。

    前端学习-常规流练习-入门

    在这个"前端学习-常规流练习-入门"的主题中,我们将深入探讨HTML和CSS的常规流概念,并通过设计稿制作简单的页面来实践这些知识。 首先,HTML是构建网页内容的标记语言,而CSS则是用来表现这些内容的样式语言。HTML...

    CSS盒子模型结构

    盒子模型的高度(即相框模型的宽度)= content + padding + border + margin,这几个参数是“盒子模型”的基本属性名,我们可以通过 CSS技术给这些属性定义不同的属性值,就可以达到丰富的效果了! padding、...

    htmlcss笔试附答案 (2).docx

    - `margin` 属性用于设置元素的外边距,可以单独设置 `margin-left`, `margin-right`, `margin-top`, `margin-bottom`,或使用简写形式。 - `background-color` 用于改变元素的背景颜色。 - `padding` 属性用于...

    前端开源库-css-shorthand-properties

    例如,`margin`就是一个典型的速记属性,它可以同时设置上、右、下、左四个方向的外边距,而不用分别写`margin-top`, `margin-right`, `margin-bottom`, 和 `margin-left`。 **一、CSS速记属性的优势** 1. **提高...

    web前端开发基础作业考核试题大全.pdf

    2. 在 CSS 中,关于 BOX 的 margin 属性正确的叙述是,margin 属性的参数有 margin-left、margin-right、margin-top、margin-bottom。 3. CSS 是利用 div 标签构建网页布局。 4. 在 CSS 中,要将某 div 设置为漂浮于...

    DIV+CSS水平垂直居中

    使用position:absolute可以将DIV元素水平垂直居中,方法是将DIV元素的left和top属性设置为50%,然后通过margin-left和margin-top属性将其调整到中心位置。例如: ;background-color:blue;width:100px;height:100px;...

Global site tag (gtag.js) - Google Analytics