<!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. 为什么实例没有prototype属性？什么时候对象会有prototype属性呢？

    为什么实例没有prototype属性?什么时候对象会有prototype属性呢? javascript loudou 1月12日提问 关注 9 关注 收藏 6 收藏,554 浏览 问题对人有帮助,内容 ...

  2. 物流管理系统(数据库+后台+springMVC+Mybatis+layui)

    数据库:mysql create database WBG_logistics; use WBG_logistics; #1管理员表 create table admin( a_id int prim ...

  3. javaweb基础(39)_数据库连接池

    一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...

  4. java基础语法：非法修饰符组合 abstract

    abstract 与 final :abstract 是需要被继承以实现的,final却说你不能被修改,逻辑错误 abstract 与  private:同样的abstract 需要被子类实现,但pr ...

  5. 实战 Lucene2.0

    Lucene 简介 Lucene 是一个基于 Java 的全文信息检索工具包,它不是一个完整的搜索应用程序,而是为你的应用程序提供索引和搜索功能.Lucene 目前是 Apache Jakarta 家 ...

  6. Easyui下的点击回车键跳转到下个控件

    在Easyui框架下,JavaScript 中的 onKeyDown事件居然失效了.所以使用了另外的函数去实现点击回车键跳转到下个控件. /** * 点击回车键跳转到下个控件; * @param ol ...

  7. LeetCode106. Construct Binary Tree from Inorder and Postorder Traversal

    题目 根据一棵树的中序遍历与后序遍历构造二叉树. 注意: 你可以假设树中没有重复的元素. 例如,给出 中序遍历 inorder = [9,3,15,20,7] 后序遍历 postorder = [9, ...

  8. 基础篇（1）：c++程序基本结构

    本人是初中生,原用Pascal语言,现转c++,所以写几篇博客,分享一下. 补一句,我是一边转c++一边写博客,所以可能会有错误,望过路大神能指出. 参考书籍:<信息学奥赛一本通>< ...

  9. JS - 给String.prototype添加replaceAll方法

    String.prototype.replaceAll = function (targetStr, newStr) {  var sourceStr = this.valueOf();  while ...

  10. django+xadmin在线教育平台（十五）

    7-4 课程机构列表页数据展示2 前去html中进行数据填充   mark 可以看到所有城市是通过a标签,当前选中城市为active.   mark 之后把下面的写死的城市删除掉.   mark 这时 ...