margin

margin：[ <length> | <percentage> | auto ]{1,4}  为元素设置所有四个方向（上右下左）的外边距

  • auto：水平（默认）书写模式下，vertical-margin计算值为0，horizontal-margin取决于包含块的剩余可用空间
  • <length>：用长度值来定义外补白。可以为负值
  • <percentage>：用百分比来定义外补白。水平（默认）书写模式下，参照其包含块的width进行计算，其它情况参照height，可以为负值 

   margin属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，

第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

    <head>

        <meta charset="utf-8" />

        <title>margin_CSS参考手册_web前端开发参考手册系列</title>

        <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />

        <style>

            .test {

                margin: 10px 20px 40px 80px;

                background: #eee;

            }

        </style>

    </head>

    <body>

        <div class="test">注意我距上、右、下、左的距离</div>

    </body>

</html>

   padding

padding：[ <length> | <percentage> ]{1,4}  为元素设置所有四个方向（上右下左）的内边距

  • <length>：用长度值来定义内补白。不允许负值
  • <percentage>：用百分比来定义内补白。水平（默认）书写模式下，参照其包含块的width进行计算，其它情况参照height，不允许负值

  padding属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，

第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            .test {

                float: left;

                padding: 10px;

                border: 1px solid #000;

            }

        </style>

    </head>

    <body>

        <div class="test">注意我离4条边框线的距离</div>

    </body>

</html>

CSS尺寸与补白属性-----margin和padding的更多相关文章

  1. 为什么要在css文件里定义 ul{margin:0;padding:0;}这个选择器？

    为什么要在css文件里定义 ul{margin:0;padding:0;}这个选择器? ul标签在FF中默认是有padding值的,而在IE中仅仅有margin默认有值.请看下面不同浏览中对paddi ...

  2. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  3. CSS属性margin、padding的区别

    原始状态 不设置margin和padding的状态 margin 设置外边距之后的状态 padding 设置内边距之后的状态 ,注意是撑开,外框高宽由300px变成450px. 说明:本文为原创作品, ...

  4. 简单属性margin和padding

    关于margin属性的介绍 margin:20px 上 右 下 左 都是20px margin:20px 40 px 上 下 20px 左 右 40px margin:20px 40px  60px ...

  5. CSS——行内元素的margin与padding

    行内元素: 1.margin:0 20px:只可以定义左右. 2.pading:20px 20px 20px 20px:上下左右都有效 例如span: <!DOCTYPE html> &l ...

  6. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  7. DIV+CSS：Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

  8. Css盒模型属性详解（margin和padding）

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  9. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

随机推荐

  1. 动态SQL详解

    动态SQL 在之前用户所编写的PL/SQL程序时有一个最大的特点:就是所操作的数据库对象(例如:表)必须存在,否则创建的子程序就会出问题,而这样的操作在开发之中被称为静态SQL操作,而动态SQL操作可 ...

  2. Asp.net Mvc action返回多个模型实体给view

    1.controller中action代码: public class HomeController : Controller { public ActionResult Detail(int id) ...

  3. springmvc实现文件上传

    springmvc实现文件上传 多数文件上传都是通过表单形式提交给后台服务器的,因此,要实现文件上传功能,就需要提供一个文件上传的表单,而该表单就要满足以下3个条件 (1)form表彰的method属 ...

  4. 【JMeter】【性能测试】配置元件

    HTTP Cookie Manager 用来存储浏览器产生的用户信息 Clear Cookies each Iteration:每次迭代请求,清空cookies,GUI中定义的任何cookie都不会被 ...

  5. IAM：亚马逊访问权限控制

    IAM的策略.用户->服务器(仓库.业务体) IAM:亚马逊访问权限控制(AWS Identity and Access Management )IAM使您能够安全地控制用户对 AWS 服务和资 ...

  6. 用laravel dingo/api创建简单的api

    1,修改.env配置文件添加 API_STANDARDS_TREE=vnd API_SUBTYPE=myapp API_PREFIX=api API_DOMAIN=null API_VERSION=v ...

  7. wordpress用Elementor拖拽生成酷炫页面

    很多朋友看到wordpress网站做得很高大上,想知道是怎么做到的,其实很简单,用Elementor就能拖拽生成酷炫页面,ytkah就直接上干货了. 1.安装Elementor,到wordpress后 ...

  8. python创建有序字典及字典按照值的大小进行排序

    有序字典 在Python中,字典类型里面的元素默认是无序的,但是我们也可以通过collections模块创建有序字典 # -*- coding:utf-8 -*- # python有序字典需导入模块c ...

  9. jquery-ui 之dialog

    1,引入css和js <script type="text/javascript" src="${ctx}/js/ytd/platform/zdjsDlbyqbh/ ...

  10. es7新特性 includes用法

    返回数组是否包含某个元素 var array1 = [1, 2, 3]; console.log(array1.includes(2)); // expected output: true