HTML连载38-内边距属性、外边距属性
一、内边距属性
1.定义:边框和内容之间的距离就是内边距
2.分开写
padding-top:数字px; padding-left:数字px; padding-bottom:数字px; padding-right:数字px;
3.连写:
padding:上 右 下 左;
4.注意点:
(1)给标签设置内边距之后,标签占有的宽度和高度会发生变化
(2)内边距也会有背景颜色
<style> div{ font-size: 25px; width:100px; height: 100px; border: 1px solid red; background-color: green; } .box1{ padding-top:20px; } .box2{ padding-left: 30px; } .box3{ padding-bottom: 40px; } .box4{ padding-right:50px; } .box5{ padding:40px 60px 70px 80px; } </style> <body> <div class="box1">我是段落一</div> <div class="box2">我是段落二</div> <div class="box3">我是段落三</div> <div class="box4">我是段落四</div> <div class="box5">我是段落五</div> </body>
二、外边距属性
1.定义:标签与标签之间的距离就是外边距
2.分开写:
margin-top:数值px; margin-left:数值px; margin-bottom:数值px; margin-left:数值px;
3.一起写
margin:上 左 下 右;
4.例子
<style> span{ width: 100px; height:100px; background-color: red; margin:50px; border:2px solid black; } .box1{ margin-top:20px; } .box2{ margin-left:30px; } .box3{ margin-bottom: 40px; } .box4{ margin-rigth:50px; } .box5{ margin:60px 70px 80px 90px; } </style> </head> <body> <span class="box1">我是span</span><span class="box2">我是span</span><span class="box3">我是span</span><span class="box4">我是span</span><span class="box5">我是span</span>
5.注意点:外边距的那一部分是没有背景颜色的。
三、源码:
d107_padding_attribute.html
d108_margin_attribute.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/d107_padding_attribute.html
https://github.com/ruigege66/HTML_learning/blob/master/d108_margin_attribute.htmll
2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包
HTML连载38-内边距属性、外边距属性的更多相关文章
- CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
- (转)css内边距与外边距的区别,精辟啊
css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...
- padding和margin——内边距和外边距
一.padding——内边距(内填充) 1.1.padding 简写属性在一个声明中设置所有填充属性.该属性可以有1到4个值. <style> div.outer{ width: 400p ...
- css常用属性:居中展示、内边距、外边距
1.横向居中.纵向居中 2.纵向展示3个块级(div标签即可纵向展示) 3.横向展示3个块级 4.在横向块级上加上边框的两种方法 法一:在父级div上加上和样式一样高的height 法二:在父级div ...
- css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
- CSS -- 盒子模型之边框、内边距、外边距
一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...
- jquery获取元素的所有宽高(包括内边距和外边距)
width() - 返回元素的宽度.height() - 返回元素的高度.innerWidth() 方法返回元素的宽度(包括内边距). innerHeight() ...
- 区分内边距与外边距padding和margin
以两个并排显示的div为例说明. 现在两个div都有背景颜色, 右边的div中有几行p, 若是想要使两个div之间有间隔, 即两块带了颜色区域之间产生空隙, 则给div的css中外边距margin赋值 ...
- CSS.03 -- 浏览器行高、字体;盒子模型--边框、内边距、外边距
如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件 ctrl+n 打开文件 ctrl+o 调出和隐藏标尺 ctrl+r ...
- css细节复习笔记——内边距、边框和外边距
一个元素的内边距.边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观. 高度和宽度 这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确 ...
随机推荐
- OpenGL入门第一天:环境
本文是个人学习记录,学习建议看教程 https://learnopengl-cn.github.io/ 非常感谢原作者JoeyDeVries和各位翻译提供的优质教程 近况(牢骚 这几天教母校初中的OI ...
- flask 使用基础
转 https://blog.csdn.net/yelena_11/article/details/53404892
- .net测试篇之测试神器Autofixture基本配置一
系列目录 实际工作中我们需要的数据逻辑万千,千变万化,而AutoFixture默认是按照一定算法随机生成一些假数据,虽然这在多数时候是ok的,但是可能不能满足我们的所有业务场景,有些时候我们需要进行一 ...
- Luogu P1462 && P1951
首先有两个最短路,可以考虑把一个东西拿出来二分,也就是可以二分最小值,但是注意不要用SPFA他死了,可以用Dij跑最短路,再二分,效率会大大提高 1.SPFA #include<bits/std ...
- java杨辉三角
public static void main(String[] args) { Scanner scanner=new Scanner(System.in); System.out.println( ...
- Netty源码分析 (一)----- NioEventLoopGroup
提到Netty首当其冲被提起的肯定是支持它承受高并发的线程模型,说到线程模型就不得不提到NioEventLoopGroup这个线程池,接下来进入正题. 线程模型 首先来看一段Netty的使用示例 pa ...
- springboot-vue前后端分离session过期重新登录
springboot-vue前后端分离session过期重新登录 简单回顾cookie和session cookie和session都是回话管理的方式 Cookie cookie是浏览器端存储信息的一 ...
- NLP(十八) 一维卷积网络IMDB情感分析
准备 Keras的IMDB数据集,包含一个词集和对应的情感标签 import pandas as pd from keras.preprocessing import sequence from ke ...
- JMeter特点&性能测试工具选型的原则&模拟压力的原理
1.JMeter自身的特点 1)开源.轻量级.更适合自动化和持续集成(100M左右,LoadRunner 4G左右) 2)学习难度大 3)资料少.全英文 2. 性能测试工具选型的原则 1)成本 a.工 ...
- codeforces 872 D. Something with XOR Queries(思维)
题目链接:http://codeforces.com/contest/872/problem/D 题意:给你一个排列p和对应的位置b也就是说p[b[i]]=i,然后给你最多询问2*n次找出所有的p排列 ...