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,一经查实,立即删除!

相关文章

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

只是粗略的分析原理,大虾轻喷~~ Gaia引擎中没有场景管理器(scenemanager)这种东西,但是并不是没有场景管理,而是在cGameHost类中有一课场景树进行场景组织、一棵四叉树用来进行剪裁。 class cGameHost class cGameHos…

C++.Templates学习总结归纳1

函数模板 首先我们来看看函数模板,一个函数模板(function template)代表一族函数,其表现和一般的函数一样,只是其中的某些元素在编写的时候还不知道,也就是说这些还不知道的元素,我们将其参数化…

Xml Tips

Xml Tips//z 2012-3-7 16:43:47 PM IS2120CSDN1. xml 中的注释<!-- 这是注释 -->并非用于 XML 分析器的内容&#xff08;例如与文档结构或编辑有关的说明&#xff09;可以包含在注释中。注释以 <!-- 开头&#xff0c;以 --> 结尾&#xff0c;例如<!--catalog la…

Window7+vs2008+QT环境搭建

记录下自己是如何搭建QT开发环境的&#xff0c;备忘吧。操作系统&#xff1a;win7&#xff0c;其实winXP&#xff0c;win7都没有关系&#xff1b;我使用的机器安装的操作系统是win7&#xff1b;开发环境是VS&#xff0c;使用2005,2008,2010或者即将发布的2011都行&#xff1b;因…

Javascript创建对象的几种方式?

javascript 中常见的创建对象的几种方式&#xff1a; 1. 使用Object构造函数创建&#xff1b; 使用Object构造函数来创建一个对象&#xff0c;下面代码创建了一个person对象&#xff0c;并用两种方式打印出了Name的属性值。 var person new Object(); person.name"kevin&…

使用 RMAN 同步数据库

使用 RMAN 同步数据库使用 RMAN 同步数据库一&#xff0e;概述二 操作步骤(一)&#xff0e;把生产库置为归档模式(二).启动rman做数据库0级备份(三)&#xff0e;修改生产库数据库到未归档(四)&#xff0e;拷贝备份集到测试库(五).在测试库上的操作一&#xff0e;概述 因项目组遇…

js实现图片上传预览及进度条

js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候&#xff0c;由于产品设计的比较fashion&#xff0c;上网找了比较久还没有现成的&#xff0c;因此自己做了一个&#xff0c;实现的功能如下&#xff1a; 1&#xff1a;去除浏览器<input …

webapi文档描述-swagger

最近做的项目使用mvcwebapi&#xff0c;采取前后端分离的方式&#xff0c;后台提供API接口给前端开发人员。这个过程中遇到一个问题后台开发人员怎么提供接口说明文档给前端开发人员,最初打算使用word文档方式进行交流&#xff0c;实际操作中却很少动手去写。为了解决这个问题&…

《推荐系统实践》样章:如何利用用户标签数据

《推荐系统实践》样章&#xff1a;如何利用用户标签数据 推荐系统的目的是联系用户的兴趣和物品&#xff0c;这种联系需要依赖于不同的媒介。GroupLens在文章1中认为目前流行的推荐系统基本上通过三种方式来联系用户兴趣和物品。如图1所示&#xff0c;第一种方式是通过用户喜欢…

STM32 基于正电原子开发板,改换芯片为STM32F103R6,Proteus仿真的一些问题

最近在学STM32&#xff0c;网上收集了一些信息&#xff0c;最后用正点原子的开发板来学习。 MDK的配置请参考原子哥的资料&#xff0c;我主要的学习方法是参考原子哥的开发板与实验案例&#xff0c;改换不一样的芯片&#xff0c;也要做出的一样的效果。但在最基础的入门就遇到…

深入理解闭包系列第二篇——从执行环境角度看闭包

前面的话 本文从执行环境的角度来分析闭包&#xff0c;先用一张图开宗明义&#xff0c;然后根据图示内容对代码进行逐行说明&#xff0c;试图对闭包进行更直观的解释 图示 说明 下面按照代码执行流的顺序对该图示进行详细说明 function foo(){var a 2;function bar(){console.…

VS2017 调用Tesseract

最近在学tesseract&#xff0c;但遇到太多的问题是。 虽然网上有不少的方法&#xff0c;就算是按照tersseract&#xff0c;github上提供的方法也是编译不成功。 问题一大堆。不过我也想到了其它方法最张还是可以用了。 我有2个方法&#xff0c; 方法1, 1&#xff0c;先build t…

在windows上安装OpenCV

在windows上安装OpenCV&#xff0c;官方提供的教程&#xff0c;我翻译了一下。如有不正解&#xff0c;请指正 使用git-bash&#xff08;版本> 2.14.1&#xff09;和cmake&#xff08;版本> 3.9.1&#xff09;安装 1.您必须下载cmake&#xff08;版本> 3.9.1&…

CMake 编译 OpenCV 项目,不是编译OpenCV, 用了之后才知道CMake也太好用了。

新建一个 CMakeList.txt 复制下面代码&#xff0c;并保存 cmake_minimum_required (VERSION 3.0)PROJECT(Chapter2)set (CMAKE_CXX_STANDARD 11)IF(EXISTS ${CMAKE_BINARY_DIR}/conanbuildinfo.cmake)include(${CMAKE_BINARY_DIR}/conanbuildinfo.cmake)conan_basic_setup() E…

Java Ajax jsonp 跨域请求

2019独角兽企业重金招聘Python工程师标准>>> 1. 什么是JSONP 一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通&#xff0c;而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略&#xff0c;网页…

对IEnumerableT,IDictionaryTkey,TValue,ICollectionT,IListT的总结

1、IEnumerable<T>接口和IEnumerable接口 实现了IEnumerable接口的集合表明该集合能够提供一个enumerator(枚举器)对象&#xff0c;支持当前的遍历集合。IEnumerable接口只有一个成员GetEnumerator()方法。 IEnumerator接口实现了IEnumerator接口的集合实现了从一个元素到…

学习Python中用numpy与matplotlib遇到的一些数学函数与函数的绘图

学习Python中的一些数学函数与函数的绘图 主要用到numpy 与 matplotlib 如果有什么不正确&#xff0c;欢迎指教。 图片不知道怎样批量上传&#xff0c;一个一个怎么感觉很小&#xff0c;请见谅 自行复制拷贝&#xff0c;到vs&#xff0c;jupyter notebook, spyder都可以 函…

有这个OCR程序,不用再买VIP了,Python 调用百度OCR API

最近学习&#xff0c;很多东西都是视频&#xff0c;截图后&#xff0c;又想做成文档保存起来。 刚开始不多&#xff0c;打一下字就很快解决了。 随着时间的推移&#xff0c;现在越来越多的图了&#xff0c;管理起来确实不方便&#xff0c;打字有时也不能很快的解决。 所以就…

linux常用命令_Linux常用命令全称

从事IT行业的很多人都会使用Linux常用命令&#xff0c;但是知道这些常用命令全称的人并不多&#xff0c;让我们来看看这些常用命令对应的全称吧&#xff01;必备Linux命令和C语言基础_C语言_嵌入式开发工程师-创客学院​www.makeru.com.cnpwd:print work directory 打印当前目录…

存储程序(1)——MYSQL

MySQL支持把几种对象存放在服务器端供以后使用。这几种对象有一些可以根据情况通过程序代码调用&#xff0c;有一些会在数据表被修改时自动执行&#xff0c;还有一些可以在预定时刻自动执行。它们包括以下几种: 1.存储函数(stored function)。返回一个计算结果&#xff0c;该结…