CSS样式属性margin,padding详解
盒模型基本属性有两个:padding和margin。
以边框border为界,边框里面是内边距,边框外面是外边距。
一.外边距margin:
外边距是指边框以外与其他同级元素之间的距离,外边距可以控制同级元素之间的距离( 用于设置同级标签的间距)。
1.margin的复合式写法:
margin:10px;(表示元素上下左右外边距都是10px)
margin:10px 10px;(表示元素上下外边距是10px,左右外边距是10px)
margin:10px 10px 10px;(表示元素上外边距是10px,左右外边距是10px,下外边距是10px)
margin:10px 10px 10px 10px;(表示元素上外边距是10px,右外边距是10px,下外
边距是10px,左外边距是10px)
2.margin的分开式写法:
margin-top: 10px;(表示元素上外边距是10px)
margin-right: 10px;(表示元素右外边距是10px)
margin-bottom: 10px;(表示元素下外边距是10px)
margin-left: 10px;(表示元素左外边距是10px)
3.margin:0 auto;——水平居中显示。
4.*{margin:0;}——取消浏览器为HTML文档中各标签设置的margin默认值,方便后面设置。
5.块级元素的垂直相邻外边距会合并(即外边距合并),合并后的外边距间距等于两个外边距高度中的较大者(例子);行内元素实际上不占上下外边距;行内元素的的左右外边距不会合并(例子);浮动元素的外边距也不会合并;
二.内边距padding:
声明中设置元素内边距的宽度,或者设置各边上内边距的宽度
1.padding的复合式写法:
padding:10px;(表示元素上下左右内边距都是10px)
padding:10px 10px;(表示元素上下内边距是10px,左右内边距是10px)
padding:10px 10px 10px;(表示元素上内边距是10px,左右内边距是10px,下内边距是10px)
padding:10px 10px 10px 10px;(表示元素上内边距是10px,右内边距是10px,下内
边距是10px,左内边距是10px)
2.padding的分开式写法:
padding-top: 10px;(表示元素上内边距是10px)
padding-right: 10px;(表示元素右内边距是10px)
padding-bottom: 10px;(表示元素下内边距是10px)
padding-left: 10px;(表示元素左内边距是10px)
3.*{padding:0;}——取消浏览器为HTML文档中各标签设置的padding默认值,方便后面设置.
4.行内非替换元素上设置的内边距不会影响行高计算,因此如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠;元素的背景会延伸穿过内边距;
CSS样式属性margin,padding详解相关推荐
- CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作 ...
- CSS高级属性之 box-shadow 详解
1.1 概述 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow 作用: 营造层次感(立体感) 充当没有宽度的边框 特殊效果 含义: ...
- CSS 高级属性之 text-shadow 详解
1.1 概述 https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow 作用: 立体感 印刷品质感 含义: 设置或检索对象中文本的文字是 ...
- margin padding 详解外边距疑惑
测试代码: <body> <!-- 提示:内边距.边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边. 提示 ...
- 从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
- html内边距居中,HTML中详述外边距样式属性(margin)与内边距样式属性(padding)...
外边距样式属性(margin) 外边距样式属性(margin):设置边框外的距离. 属性:margin-top样式属性,margin-bottom样式属性,margin-left样式属性和margin ...
- html css主题,HTML+CSS=无限可能——案例详解:我的POI主题作品
原标题:HTML+CSS=无限可能--案例详解:我的POI主题作品 在微博发了这个作业,收到很多好评,实在太开心! 斌叔让我来投稿,那今天就以这个网页为案例,把制作过程中我的方法和经验分享给大家. 作 ...
- css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
最新文章
- 《java第二次实验》
- html 调入网页,HTML 文件怎么从外部调入 HTML 模板(如头部,页尾这些公共的部分)?...
- Java多线程之实现多线程的三种方法
- 【Numpy 学习记录】np.stack 和 np.concatenate
- LeetCode 366. 寻找二叉树的叶子节点(上下翻转二叉树+BFS)
- docker mysql优势_前端使用docker有什么优势呢?
- 内存管理(C语言中malloc和free的用法)
- sim卡没坏但苹果手机无服务_iPhone手机无服务那些事儿
- CentOS下PostgreSQL 主从实现之异步流复制(Hot Standby)
- android 调用百度地图api
- Douglas Peucker算法的C#实现
- 不需编译让aspx页自主筛选数据绑定记录
- C/C++[codeup 1805]首字母大写
- 详解vue原理之观察模式Dep->Watcher
- 误删 Win10 应用商店应该如何恢复?
- 织梦dede列表分页样式
- react服务端渲染技术
- 电脑上怎么绘制流程图以及在线绘制方法
- python开发工程师是干嘛的-python工程师是做什么的
- 人类高质量文章:阿里大佬的回顾