css样式 向下补白,CSS尺寸与补白属性-----margin和padding

margin

margin：[ | | auto ]{1,4}  为元素设置所有四个方向(上右下左)的外边距

auto：水平(默认)书写模式下，vertical-margin计算值为0，horizontal-margin取决于包含块的剩余可用空间

：用长度值来定义外补白。可以为负值

：用百分比来定义外补白。水平(默认)书写模式下，参照其包含块的width进行计算，其它情况参照height，可以为负值

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

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

margin_CSS参考手册_web前端开发参考手册系列

.test {

margin: 10px 20px 40px 80px;

background: #eee;

}

注意我距上、右、下、左的距离

padding

padding：[ | ]{1,4}  为元素设置所有四个方向(上右下左)的内边距

：用长度值来定义内补白。不允许负值

：用百分比来定义内补白。水平(默认)书写模式下，参照其包含块的width进行计算，其它情况参照height，不允许负值

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

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

.test {

float: left;

padding: 10px;

border: 1px solid #000;

}

注意我离4条边框线的距离

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

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

CSS属性margin、padding的区别

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

简单属性margin和padding

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

CSS——行内元素的margin与padding

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

HTML CSS——margin与padding的初学

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

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

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

Css盒模型属性详解(margin和padding)

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

CSS中margin与padding的区别

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

随机推荐

Objective-C学习笔记之block

//定义一个函数,传入block类型参数myBlock5 int fun(int (^myBlock5)(int a,int b)) { return myBlock5(10,20); } int ( ...

关于Jquery学习的几点反思

1.应用的API插件时,先看说明文档,仔细看,多花点时间也没关系. 2.写出你要完成工作的几个步骤,细化你的工作.保证每一步结果都是正确(特别是在用你不会的东西的时候),这样看起来是在浪费时间,但是最 ...

Chrome中的Device模块调式响应性设计

Chrome中的Device模块调式响应性设计 阅读目录 启用Device模块 Device模块设置介绍 自定义预设介绍 查看media queries 触发触摸事件 回到顶部 启用Device模块 ...

(转发)RequestDispatcher的include()方法和forward()方法的区别

forward(): 该方法用于将请求从一个Servlet传递给服务器上的另外的Servlet.JSP页面或者是HTML文件. 在Servlet中,可以对请求做一个初步的处理,然后调用这个方法,将请求 ...

[UWP]做个调皮的BusyIndicator

1. 前言 最近突然想要个BusyIndicator.做过WPF开发的程序员对BusyIndicator应该不陌生,Extended WPF Toolkit 提供了BusyIndicator的开源实现 ...

SQL 概述

SQL是用于在数据库中存储,操作和检索数据的标准语言. 本教程教你如何使用SQL:MySQL,SQL Server,MS Access,Oracle,Sybase,Informix,Postgres和 ...

Vue.JS React 精彩文章汇总

JavaScript深入系列  [干货] JavaScript数组所有API全解密  [干货] 移动端:页面->手淘互动动效的探索 - IT大咖说 - 大咖干货,不再错过 [扫盲] Jonath ...

Git换行符是如何精确控制的

Git换行符是如何精确控制的 Checkout Windows-style, commit Unix-style Git will convert LF to CRLF when checking o ...

1023. Camelcase Matching驼峰式匹配

网址:https://leetcode.com/problems/camelcase-matching/ 依题意可得逻辑 class Solution { public: vector

content provider其中操作文件的函数

此类函数还是有杀伤力的 1.openAssetFile(Uri uri, String mode)This is like openFile(Uri, String), but can be impl ...