padding margin

时间:2021-09-11 22:39:37

padding:内边距

margin:外边距

内外边距是针对本标签相对于它相邻的标签而言。

  margin: 10px;是本标签与它周围上下左右有10像素的空白。

  padding: 10px;本标签其实与它周的标签是紧贴着的,是本标签的边界与本标签的内容有10像素背景颜色距离。

  它们都有单独的margin-top left right bottom区别

<div style="width: 500px;border: 1px solid red;">
<div style="height: 160px;width: 160px;border: 1px solid green;">1</div>
<div style="background-color: rebeccapurple;margin: 10px;">2</div>
<div style="background-color: rebeccapurple;padding-top: 10px;">2</div>
</div>

  margin: 0 auto;的用法,几乎所有的网站都是这样用的,让抬头居中对齐,auto就是左右距离自动的意思.

<div class="pg-header">
<div style="width: 980px;margin: 0 auto;">
<div style="float: left;">收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear: both;"></div>
</div>
</div>

  


padding margin的更多相关文章

  1. 【转】图解CSS的padding&comma;margin&comma;border属性&lpar;详细介绍及举例说明&rpar;

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  2. CSS之padding&amp&semi;margin

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. &lbrack;转&rsqb;图解CSS的padding&comma;margin&comma;border属性&lpar;详细介绍及举例说明&rpar;

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  4. Html的Padding&comma;Margin自己理解图

    Html的Padding,Margin自己理解图.

  5. css之display样式&comma;padding&comma;margin

    1. 块级标签变成行内标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. 图解CSS的padding&comma;margin&comma;border属性&lpar;详细介绍及举例说明&rpar;

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  7. JQUERY 获取 DIV 宽度与高度(width&comma;padding&comma;margin&comma;border)

    一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与  Margin 的宽度,四个加起来才是 di ...

  8. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  9. 元素间距属性(scrollLeft&comma;scrollWidth&comma;clientWidth&comma;offsetWidth&comma;padding&comma;margin)

    scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...

  10. 图解CSS的padding&comma;margin&comma;border属性

    原文出处:http://hi.baidu.com/sonan/item/af05cf8759810d1cc31627d5 觉得不错,保存以备用. --------------------------- ...

随机推荐

  1. hadoop运行原理之Job运行&lpar;五&rpar; 任务调度

    接着上篇来说.hadoop首先调度辅助型task(job-cleanup task.task-cleanup task和job-setup task),这是由JobTracker来完成的:但对于计算型 ...

  2. RainCup&lowbar;No&period;1

    Rain杯No.1 初见篇 本系列故事以及人名地名等纯属虚构,如有雷同,纯属巧合 在极东之地,有一个岛国,与岛国隔了一个海域有一个古老的国度,天朝.天朝T镇有个少年叫小S,故事从小S与少女Rain的相 ...

  3. forEach遍历数组实例

    forEach()取出数组中2的倍数和3的倍数的数 //for IE if(!Array.prototype.forEach){ Array.prototype.forEach = function( ...

  4. Centos7搭建集中式日志系统

    在CentOS7中,Rsyslong是一个集中式的日志收集系统,可以运行在TCP或者UDP的514端口上.   目录 开始之前 配置接收日志的主机 配置发送日志的主机 日志回滚 附件:创建日志接收模板 ...

  5. TPL&lpar;Task Parallel Library&rpar;多线程、并发功能

    The Task Parallel Library (TPL) is a set of public types and APIs in the System.Threading and System ...

  6. phpcms v9联动菜单实现筛选

    <!--初始化init--> {php $theurl = "index.php?m=content&c=index&a=lists&catid=$cat ...

  7. &lbrack;Leetcode&rsqb;&lbrack;021&rsqb; Merge Two Sorted Lists &lpar;Java&rpar;

    题目在这里: https://leetcode.com/problems/merge-two-sorted-lists/ [标签]Linked List [题目分析]这个题目就是merge sort在 ...

  8. php正则提取img所有属性值

    $ext = 'gif|jpg|jpeg|bmp|png';//罗列图片后缀从而实现多扩展名匹配 by http://www.k686.com 绿色软件 $str = ''; $list = arra ...

  9. WPF 3D:使用GeometryModel3D的BackMaterial

    原文 WPF 3D:使用GeometryModel3D的BackMaterial 使用BackMaterial,我们可以定义3D物体的内部材质(或者说是背面),比如,我们定义一个四方体容器,外面现实的 ...

  10. 576&period; Out of Boundary Paths

    Problem statement: There is an m by n grid with a ball. Given the start coordinate (i,j) of the ball ...