CSS padding margin border属性讲解

把所有网页上的对象都放在一个盒（box）中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片以及层。
盒模型主要定义四个区域：
内容（content）
内边距（padding）
边框（border）
外边框（margin）

margin层的边框以外留的空白
background-color背景颜色
background-image背景图片
padding层的边框到层的内容之间的空白
border边框
content内容

margin和padding的属性
margin:

包括margin-top,margin-right,margin-bottom,margin-left
控制块级元素之间的距离他们是透明不可见的
根据上右下左的顺时针规则，可以写为
margin: 40px 40px 40px 40px;

当上下，左右margin值分别一致的时候，可简写为
margin: 40px 40px;

当上下左右margin值都一致的时候，可写为
margin: 40px;

padding
包括padding-top,padding-right,padding-bottom,padding-left
控制块级元素内部 content与border之间的距离

详细说明：
如果只提供一个，将用于全部的四条边
如果只提供两个，第一个用于上下，第二个用于左右
如果提供三个，第一个用于上，第二个用于左右，第三个用于下
如果提供四个，第一个用于上，第二个用于右，第三个用于下，第四个用于左
padding: 36px; //对象四边的补丁边距均为36px
padding: 36px 24px; //上下两边的补丁边距为36px，左右两边的补丁边距为24px
padding: 36px 24px 18px; //上、下两边的补丁边距分别为36px、18px，左右两边的补丁边距为24px
padding: 36px 24px 18px 12px; //上、右、下、左补丁边距分别为36px、24px、18px、12px

" margin: 0 atuo ; "
表示上下边界为0，左右则根据宽度自适应相同值（即水平居中）

auto值：用于设置浏览器边距。这样做的结果会依赖于浏览器，根据宽度自适应相同值

CSS padding margin border属性讲解相关推荐

CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
【网页制作】CSS文本和字体属性讲解【附讲解视频】
1.CSS文本和字体属性的作用:给文本和字体设置样式(具体看第二部分) 注意:在html中我们可以省略单位,但CSS中不可以省略单位. 简单的说大多数情况在html的body标签中我们可以省略单位,但 ...
css margin属性 auto,css中margin:auto属性的使用方法
css中margin:auto属性的使用方法发布时间:2020-06-25 10:53:17 来源:亿速云阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...
CSS中设置border属性为0与none的区别
在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一 ...
CSS：不可思议的border属性
原文:Magic of CSS border property 译文:不可思议的CSS border属性译者:dwqs 在CSS中,其border属性有非常多的规则. 对于一些事物,比如三角形或者其 ...
CSS的Padding, Margin, Border 的区别
HTML的元素 HTML语言定义了一系列的标签元素, 比如div, hr , ul , a 等等.粗略来分, 有以下几种类型: 块状元素: 以块的形式显示一个矩形区域, 可以定义自己的高度和宽度, 可 ...
CSS中的border属性
合着写: border: 1px solid blue;第一个值:border-width:边框的宽度; 第二个值:border-style:边框的样式;第三个值:border-color:边框颜色; ...
懂点前端——对CSS中的Padding、Border、Margin属性的理解
作为一个志在AIot(实际在写上位机程序.嵌入式代码)的工程师,怎么又关心起前端来了呢?怎么说呢,前端的应用范围广啊,从高大上的算法.富有科技感的物联网应用到无处不在的Web应用,只要是需要和终端用户 ...

CSS padding margin border属性讲解

CSS padding margin border属性讲解相关推荐

最新文章

热门文章