<!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. python剑指offer数组中出现次数超过一半的数字

    题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...

  2. 递归函数之阶乘和字符串反转－基于R和Python

    Python课第五周开始讲函数了.递归函数.递归在python中不能超过900多层,否则报错内存溢出什么的.同样在R中递归太深也会报错,阈值和python中大概一样,900多次就报错了. error ...

  3. Makefile 简述

    定义 Linux 环境下的程序员如果不会使用GNU make来构建和管理自己的工程,应该不能算是一个合格的专业程序员,至少不能称得上是 Unix程序员.在 Linux(unix )环境下使用GNU 的 ...

  4. 第2章-如何安装KEIL5—零死角玩转STM32-F429系列

    第2章     如何安装KEIL5 集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/firege 本章内 ...

  5. maven中import scope依赖方式解决单继承问题的理解

    在maven多模块项目中,为了保持模块间依赖的统一,常规做法是在parent model中,使用dependencyManagement预定义所有模块需要用到的dependency(依赖) <d ...

  6. Session和cookic

    session是无状态的方式,服务器存储机制,当用户第一次请求服务器,服务器会给客户分配一个标识id,客户端再次访问服务器,根据session id 去访问服务器数据库,返回信息,同时session ...

  7. 浅谈PHP中的数组和JS中的数组

    最近在做前后端对接的时候,遇到一个问题,前端要求返回的数据格式是左边的,但是我通过json_encode返回到的数据格式是右边的   注意:数据格式从"[]"(数组)变成了&quo ...

  8. Orcale(一)

    oracle数据库基本语句查询 ORacle-12560:TNS 协议配置器错误 1.服务:1.监听服务未开启 2.服务器未开启 3.环境变量:Oracle_sid = orcl 4.regedit注 ...

  9. scrapy--dbmeinv

    第一次将自己的爬虫文件与大家分享.豆瓣美女网页图片爬取.比较简单,但很实用.给大家提供思路为主,增强个人的爬虫能力.希望能帮助到大家!!! 好了,让我们进入正题. 先给大家看下成果!!!激励大家赶快行 ...

  10. 课时68.id选择器（掌握）

    1.什么是id选择器? 作用:根据指定的id名称找到对应的标签,然后设置属性 格式: #id名称{ 属性:值; } 注意点: 1.每个html标签都有一个属性叫做id,也就是说每个标签都可以设置id ...