<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>padding和margin的用法</title>

    <style>

        .box{

            width:200px;

            height:200px;

            background:tan;

            /*1个参数：4边*/

            padding:30px;

            /*2个参数：上下 左右*/

            padding:10px 20px;

            /*3个参数：上 左右 下*/

            padding:10px 20px 30px;

            /*4个参数：上 右 下 左*/

            padding:10px 20px 30px 40px;

            /*padding-top:10px;

            padding-right:20px;*/

            /*margin:0 100px;*/

            /*margin-left:auto;

            margin-right:auto;*/

            /*让块级元素水平居中*/

            margin:0 auto;

        }

        b{

            background:orange;

            /*margin:0 auto;*/

            /*给行级标签的父元素加text-align:center就可以让行级元素居中*/

            text-align:center;

        }

    </style>

</head>

<body>

    <div style="text-align:center"><b>行级标签</b></div>

    <div class="box">你们峰哥跟我说：他一直就很喜欢小林子！那不直的时候呢？</div>

</body>

</html>

<!--

padding 内边距

    padding 统一设置内边距

        padding:4边

        padding:上下 左右

        padding:上 左右 下

        padding:上 右 下 左

    padding-top

    padding-right

    padding-bottom

    padding-left

margin 外边距

    margin 统一设置外边距

        margin:4边

        margin:上下 左右

        margin:上 左右 下

        margin:上 右 下 左

    margin-top

    margin-right

    margin-bottom

    margin-left

    小提示：margin:0 auto 可以让块级元素水平居中

-->

css 外边距，内边距的使用的更多相关文章

  1. CSS权威指南 - 内边距 边框 和 外边距

    九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框 ...

  2. CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系

    一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...

  3. CSS.03 -- 浏览器行高、字体；盒子模型--边框、内边距、外边距

    如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件   ctrl+n 打开文件  ctrl+o 调出和隐藏标尺 ctrl+r ...

  4. css 尺寸、边框、内边距、背景以及css Sprite

    上节课回顾: HTML标签: 格式排版 p 段落 双br 换行 单hr 分隔线 单h1~h6 标题 双pre 原样格式化输出 双div 标签,无任何特殊意义 HTML标签 :文本 <em> ...

  5. CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

    转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...

  6. css内边距与外边距的区别

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...

  7. CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  8. (转)css内边距与外边距的区别，精辟啊

    css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...

  9. CSS 内边距 外边距

    CSS 内边距 外边距 <html> <!-- style="margin: 0 auto" 将网页上方空白边距填满--> <body style=& ...

  10. css总结9：内边距（padding）和外边距（margin）

    1 css总结9:内边距和外边距 通过css总结8:盒子模型可知:内边距(padding),外边距(margin).可以影响盒子在浏览器的位置. 1.1 padding使用:{padding:上 右 ...

随机推荐

  1. 2018.7.19 . php复习

    PHP程序设计 1.请写出HTML标记meta的完整英文单词:metadata 2.相当于http文件头作用(向浏览器传回正确和精确地显示网页内容的消息)的meta标记的属性是http-equiv 3 ...

  2. tarjan+topsort

    题目 缩完点后统计入读为零的点就可以来. 因为缩完点后肯定是DAG #include<iostream> #include<cstdio> #include<algori ...

  3. requireJS的学习

    官方文档 http://www.requirejs.cn/ 参考链接 http://www.w3cschool.cc/w3cnote/requirejs-tutorial-1.html http:// ...

  4. PHP调试小错误汇总

    1.中文显示乱码 解决:加上header('Content-type:text'); 2.Unable to find the wrapper "https 解决:到php.ini中把ext ...

  5. ajaxfileup.js

    <img id="tinyPic" class="user-icon" :src="headPortrait"><inpu ...

  6. javascript入门笔记7-计时器

    计时器 语法: setInterval(代码,交互时间) 参数说明: 代码:要调用的函数或要执行的代码串. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms). 例子: & ...

  7. ES6笔记01-声明变量

    ES6只有六种声明变量的方法:var命令和function命令,let和const命令,import命令和class命令.所以,ES6一共有6种声明变量的方法. const声明一个只读的常量.一旦声明 ...

  8. OpenLDAP部署目录服务

        文档信息 目        的:搭建一套完整的OpenLDAP系统,实现账号的统一管理.                     1:OpenLDAP服务端的搭建               ...

  9. Python面向对象--高级(二)

    ## 使用__slots__限制类的属性 - 之前说到,可以通过在类外部实例或者类名任意定义实例属性或者类属性或者方法 class Person(object): pass Person.name = ...

  10. Python代码结构——顺序、分支、循环

    ## 顺序结构 - 按照从上到下的顺序,一条语句一条语句的执行,是最基本的结构 ## 分支结构 if condition: statement statement ... elif condition ...