1. css 内间距

  • 也称：“内补白”或“内补丁”
参数 释义
padding 检索或设置对象四边的内部边距，如 padding:10px; padding:5px 10px;
padding-top 检索或设置对象顶边的内部边距
padding-right 检索或设置对象右边的内部边距
padding-bottom 检索或设置对象下边的内部边距
padding-left 检索或设置对象左边的内部边距
  • 举例
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        <div class="box1">box1</div>

        <div class="box2">box2</div>

        <div class="box3">box3</div>

        <div class="box4">box4</div>

    </body>

</html>


*{

    width: 100px;

    height: 100px;

}

.box1{

    background-color: #edd094;

}

.box2{

    background-color: #a7ab86;

    padding-top: 10px;

    padding-bottom: 10px;

    padding-left: 10px;

    padding-right: 10px;

}

.box3{

    background-color: #b35e59;

    padding: 10px;

}

.box4{

    background-color: #8a7e94;

    padding: 10px 15px;

}
  • 效果

2. css 外间距

  • 也称：“外补白”或“外补丁”
参数 释义
margin 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
margin-top 检索或设置对象顶边的外延边距
margin-right 检索或设置对象右边的外延边距
margin-bottom 检索或设置对象下边的外延边距
margin-left 检索或设置对象左边的外延边距
  • 举例
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        <div class="box1">box1</div>

        <div class="box2">box2</div>

        <div class="box3">box3</div>

        <div class="box4">box4</div>

    </body>

</html>


*{

    width: 100px;

    height: 100px;

}

.box1{

    background-color: #edd094;

}

.box2{

    background-color: #a7ab86;

    margin-top: -10px;

    margin-bottom: 10px;

    margin-left: 10px;

    margin-right: 10px;

}

.box3{

    background-color: #b35e59;

    margin: 10px;

}

.box4{

    background-color: #8a7e94;

    margin: 10px 20px;

}

.box5{

    background-color: #f1c4be;

    margin: 10px auto;

}
  • 效果截图

margin 相关技巧

  1. 设置元素水平居中：margin:x auto;
  2. margin 负值让元素位移及边框合并

[Web 前端] 013 css 内外边距的更多相关文章

  1. css内外边距属性

    盒子模型: 所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用. CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框 ...

  2. CSS 内外边距 float positio属性

    一.外边距和内边 margin:            用于控制元素与元素之间的距离 外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding:   ...

  3. css - 盒子内外边距

    css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{     width:200px; ...

  4. Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618473 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 盒子模型: <!D ...

  5. css关于内外边距的详细解释

    贴图吧,图一眼明了. 无效果时候有 只有一个<div>啦啦啦</div> 只有padding时候有: padding详细设计时: 解释:padding是对内的,如padding ...

  6. 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  9. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

随机推荐

  1. 【Luogu4299】首都

    BZOJ权限题. 洛谷 题目描述 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打败了B国,那么B ...

  2. Python---进阶---捕获异常

    一.编写一个计算减法的方法,当第一个数小于第二个数时,抛出“被减数不能小于减数”的异常 ------------------------------------------------- def ji ...

  3. 【leetcode】540. Single Element in a Sorted Array

    题目如下: 解题思路:题目要求时间复杂度是O(logN),可以尝试使用二分查找法.首先数组是有序的,而且仅有一个元素出现一次,其余均为两次.我们可以先找到数组最中间的元素,记为mid.如果mid和mi ...

  4. JS中的执行机制（setTimeout、setInterval、promise、宏任务、微任务）

    1.执行机制 JS 是单线程的,处理 JS 任务(程序)只能一个一个顺序执行,所以 JS 中就把任务分为了同步任务和异步任务.同步的进入主线程先执行,异步的进入Event Table并注册函数,当指定 ...

  5. 超大文件上传方案（PHP）

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...

  6. 【bzoj1336/1337/2823】最小圆覆盖

    题目描述: 给出平面上N个点,请求出一个半径最小的圆覆盖住所有的点 输入: 第一行给出数字N,现在N行,每行两个实数x,y表示其坐标. 输出: 输出最小半径,输出保留三位小数. 样例输入: 4 1 0 ...

  7. Laya 使list渲染支持分帧的思路

    Laya 使list渲染支持分帧的思路 @author ixenos 2019-09-06 1.由于Laya的list渲染时没有做分帧处理,只做了延迟帧处理,所以当单页元素较多时,会有大量运算卡帧的情 ...

  8. 解决：父类中的@NotNull无效以及@Notnull 验证list对象无效

    解决方法如图: controller层 vo.param层 父类验证注解要使用@NotEmpty 不能使用 @NotNull,否则验证无效的,反正笔者是没有成功过

  9. UVALive 6862 Triples （找规律 暴力）

    Triples 题目链接: http://acm.hust.edu.cn/vjudge/contest/130303#problem/H Description http://7xjob4.com1. ...

  10. lunwenzhunbei

    1,android sensors introduction http://developer.android.com/guide/topics/sensors/sensors_overview.ht ...