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.mzph.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;实际操作中却很少动手去写。为了解决这个问题&…