CSS内边距外边距代码详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS内边距外边距代码详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9022字，纯文字阅读大概需要13分钟。

内容图文

本文主要和大家分享css之内边距与外边距，本文运用了多个实例与代码，希望能帮助到大家。

外边距:

margin 
左边距 margin-left:数值 | autoauto:即距离这个边最远的距离
右边距: margin-right:数值 | auto上边距: margin-top:数值  这里不能用auto下边距: margin-bottom:数值 这里也不能用auto外边距 复合写法1:margin: 0px(上) 0px(右) 0px(下) 0px(左)2:margin: 0px(上) 0px(左右) 0px(下)3:margin: 0px(上下边距) 0px(左右边距)4:margin: 0px(上下左右边距都是0px)

代码示例:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <link rel="stylesheet" href="index.css"/>   </head><body>
    <p class="p1">我是p1</p>
    <p class="p2">我是p2</p></body></html>p{
    width: 200px;
    height: 200px;
    background: red;
}
.p1{
    margin-left: 100px;
    margin-top: 100px;
    margin-bottom: 0px;
}
.p2{
    background: blue;
    margin-right: auto;
    margin-left: auto;
    /* margin-left: 300px;
    margin-top: -200px; */
}

微博三列布局

模仿页面 简单实现三列<!DOCTYPE html><html lang="en"><head>
    <meta charser="utf-8"/>
    <title>微博三列布局</title>
    <style>
        .content{            width : 900px;            height : 1200px;            background-color:yellow;        }
        .p1{            width:200px;            height:1200px;            background-color:red;        }
        .p2{            width:500px;            height:1200px;            background-color:green;            margin-left:220px;            margin-top:-1200px;        }
        .p3{            width:160px;            height:1200px;            background-color:blue;            margin-left:auto;            margin-top:-1200px;        }
    </style></head><body>
    <p class="content">
        <p class="p1"></p>
        <p class="p2"></p>
        <p class="p3"></p>
    </p></body></html>

CSS内边距外边距代码详解 - 文章图片

内边距

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <link rel="stylesheet" href="index.css"/></head><body>
    <!-- 内边距 padding -->
    <!-- 左内距 padding-left:数值 -->
    <!-- 右内距 padding-right:数值 -->
    <!-- 上内距 padding-top -->
    <!-- 下内距 padding-bottom -->

    <!-- 内边距 复合写法 -->
    <!-- 1:padding: 0px(上) 0px(右) 0px(下) 0px(左) -->
    <!-- 2:padding: 0px(上) 0px(左右) 0px(下) -->
    <!-- 3:padding: 0px(上下边距) 0px(左右边距) -->
    <!-- 4:padding: 0px (上下左右边距都是0px)-->
    <p>xxxx</p></body></html>

背景色样式:

背景样式:background
背景颜色 background-color:颜色值
背景图片 background-image:url("图片路径")
背景图片平铺 backgroud-repeat:repeat-x(沿着x轴平铺) | repeat-y(沿着Y轴平铺) | no-repeat(不平铺)
背景图片定位 background-position: x y
x轴: 支持left center right 支持百分比
y轴: 支持top center bottom 支持百分比
背景图片尺寸 background-size: x y | cover | contain
background:复合写法
background:background-color background-image background-position background-repeat定义多张图片的复合写法
background:url("timg.jpg") 0px 0px/100px 100px repeat, url("timg.jpg") 30% 30%/100px 100px no-repeat, 
url("timg.jpg") 60% 60%/100px 100px no-repeat, gold url(timg.jpg) 90% 90%/100px 100px no-repeat;

外边距的坑:

父子同级结构下,父级与子级都设置了上边距的情况下,如果父级没有设置border的情况下,会引起塌陷问题,
即父级框会向下移动一段距离(这段距离是子级设置的上边距的长度)

比如没有border的代码:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8"/>
    <title>外边距的坑</title>
    <style>
        .p1{            width:250px;            height:250px;            margin-top:5px;            background-color:blue;        }
        .p2{            width:150px;            height:150px;            margin-top:50px;            background-color:red;        }
    </style></head><body>
    <p class="p1">
        <p class="p2">
            <p class="p3">q</p>
        </p>
    </p></body></html>

此时结果截图:

CSS内边距外边距代码详解 - 文章图片

当设置了border时,这个塌陷问题将得到完美解决,这个塌陷问题是系统的原因,我们只负责解决
解决后的代码:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8"/>
    <title>外边距的坑</title>
    <style>
        .p1{            width:250px;            height:250px;            margin-top:5px;            background-color:blue;            border:1px gold dashed;        }
        .p2{            width:150px;            height:150px;            margin-top:50px;            background-color:red;        }
    </style></head><body>
        <p class="p1">
            <p class="p2">
                <p class="p3">q</p>
            </p>
        </p></body></html>

此时运行结果截图:

CSS内边距外边距代码详解 - 文章图片

从截图中可以看到,父级的位置恢复为原来的位置(原来位置:即没有创建p2的时候,p1所在的位置),塌陷问题得到解决.

设置内边距问题
一个p即可以设置外边距也可以设置内边距,当设置内边距时,该框体会在该方向上扩大相应的距离
比如初始情况为:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8"/>
    <title>外边距的坑</title>
    <style>
        .p1{            width:200px;            height:200px;            margin-top:5px;            background-color:blue;            border:1px gold dashed;        }
        .p2{            width:100px;            height:100px;            margin-top:20px;            background-color:red;        }
    </style></head><body>
        <p class="p1">
            <p class="p2">
                <p class="p3">q</p>
            </p>
        </p></body></html>

结果截图:这个结果是宽200 高200时的结果,此时没有设置内边距

CSS内边距外边距代码详解 - 文章图片

设置内边距时的代码:此时将边框顶边的内边距设置为50

代码示例:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8"/>
    <title>外边距的坑</title>
    <style>
        .p1{            width:200px;            height:200px;            margin-top:5px;            padding-top:50px;            background-color:blue;            border:1px gold dashed;        }
        .p2{            width:100px;            height:100px;            margin-top:20px;            background-color:red;        }
    </style></head><body>
        <p class="p1">
            <p class="p2">
                <p class="p3">q</p>
            </p>
        </p></body></html>

结果截图:此时外边框的高变为了250,外边框顶边距内边框顶边的距离为20+50=70像素

CSS内边距外边距代码详解 - 文章图片

此时要想设置内边距同时又不想改变框体的大小,需要提前从外边框的高度中减去要设置的内边距的长度,即200-50=150,即外边框的属性设置为宽200像素,高150像素
代码示例

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8"/>
    <title>外边距的坑</title>
    <style>
        .p1{            width:200px;            height:150px;            margin-top:5px;            padding-top:50px;            background-color:blue;            border:1px gold dashed;        }
        .p2{            width:100px;            height:100px;            margin-top:20px;            background-color:red;        }
    </style></head><body>
        <p class="p1">
            <p class="p2">
                <p class="p3">q</p>
            </p>
        </p></body></html>

结果截图:此时的结果恢复为外边框为正放形
CSS内边距外边距代码详解 - 文章图片

此时如果将子级的上边框也设置内边距,则也需要提前将子级的高减去相应的距离
代码示例:代码中高已经减去相应的内边距;如果子级边框不设置边框顶边的内边距,设置边框底边的内边距,此时为了确保边框不因为内边距为改变,任然需要减去相应的内边距
代码为设置边框定边的内边距

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8"/>
    <title>外边距的坑</title>
    <style>
        .p1{            width:200px;            height:150px;            margin-top:5px;            padding-top:50px;            background-color:blue;            border:1px gold dashed;        }
        .p2{            width:100px;            height:80px;            margin-top:20px;            padding-top:20px;            background-color:red;        }
    </style></head><body>
        <p class="p1">
            <p class="p2">
                <p class="p3">q</p>
            </p>
        </p></body></html>

结果截图:此时的结果不太明显

CSS内边距外边距代码详解 - 文章图片

外边距的另一个坑:

同级结构下(注意不是父子结构,上面那个坑是父子级结构),外边距冲突的情况下(即两个同级的p,一个在上面,一个在下面,
你设置了外边距即magin-bottom,我也设置了外边距即(magin-top),此时两个外边距在一起会起冲突,
他们两个的距离会是两个边距中的较大者,而不是两个边距的值相加
代码示例:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8"/>
    <title>外边距的坑</title>
    <style>
        .p1{            width:100px;            height:100px;            margin-bottom:20px;            background-color:blue;        }
        .p2{            width:100px;            height:100px;            margin-top:30px;            background-color:red;        }
    </style></head><body>
    <p class="p1"></p>
    <p class="p2"></p></body></html>

结果截图:

CSS内边距外边距代码详解 - 文章图片

盒模型的构成需要:<!-- 盒模型：构成：容器尺寸+padding+border+margin -->

六环练习

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>六环</title>
    <style>
        .p1{            border: 1px dashed black;            width: 600px;            height: 554px;            margin: 0 auto;            padding-top: 46px;        }
        .p2{            border: 4px lightblue solid;            background: gray;            width: 500px;            height: 475px;            margin: 0 auto;            padding-top: 25px;        }
        .p3{            background: pink;            width:450px;            height: 425px;            margin: 0 auto;            padding-top: 25px;        }
        .p4{            border: 1px dotted white;            width: 400px;            height: 380px;            margin: 0 auto;            padding-top: 20px;        }
        .p5{            border: 1px dashed white;            width: 340px;            height: 320px;            margin: 0 auto;            padding: 20px;        }
        .p6{            width:300px;            height:300px;            margin:auto;            background-color: red;        }
    </style></head><body>
    <p class="p1">
        <p class="p2">
            <p class="p3">
                <p class="p4">
                    <p class="p5">
                        <p class="p6"></p>
                    </p>
                </p>
            </p>
        </p>
    </p></body></html>

内容总结

以上是互联网集市为您收集整理的CSS内边距外边距代码详解全部内容，希望文章能够帮你解决CSS内边距外边距代码详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/412533.html

来源：【匿名】

【上一篇】css不固定宽高垂直居中的实现代码【下一篇】php无法调用css怎么办

更多 ►

【CSS内边距外边距代码详解】教程文章相关的互联网学习教程文章

今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、过渡(transition)和动画(animation)等CSS3技术。首先我们先来了解一下变形(transform),transform就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们来看一看它们是如何使用，先从我们的transform语法开始：　<!--它其中的值为：旋转rotate、扭曲skew、缩放scale和移动...

CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。二.缩放 scale用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);参数表示缩放倍数；一个参数时：表示水平和垂直同时缩放该倍率两个...

CSS绝对定位详解【图】

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。直线电机生产厂家元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。CSS 绝对定位 ( 推荐学习：CSS教程 )绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型...

详解css-loader配置【代码】【图】

作用css-loader用于将css文件打包到js中, 常常配合style-loader一起使用，将css文件打包并插入到页面中。如下：{test: /\.css$/,use: [{loader: ‘style-loader‘},{loader: ‘css-loader‘,options: {root: ‘/‘, //修改css中url指向的根目录, 默认值为/, 对于绝对路径, css-loader默认是不会对它进行处理的modules: false, //开启css-modules模式, 默认值为flaselocalIdentName: ‘[name]-[local]-[hash:base64:5]‘, //设置css...

CSS3盒子模型详解【图】

本章将介绍CSS3中各种盒的知识点；主要包含以下内容：CSS3中各种各样盒的类型概念、浏览器支持情况；当盒中内容超出容纳范围时，如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示；掌握给盒添加阴影的属性；掌握几种“box-sizing”属性值的不同含义，能够正确的使用box-sizing属性来定义样式中给定的元素的宽度值和高度值中是否包含内部补白区域，以及边框的高度和宽度；盒的类型 inline-blockcss中我们使用display来定...

CSS中伪类及伪元素用法详解【图】

原文:CSS中伪类及伪元素用法详解伪类的分类及作用：注：该表引自W3School教程伪元素的分类及作用：接下来让博主通过一些生动的实例（之前的作业或小作品）来说明几种常用伪类的用法和效果，其他的读者可以自己尝试： :active 大致效果为用鼠标点击时，元素增加特效，鼠标松开时，特效消失。多用在按钮的点击上。写法：这里id为box的是一div块，在css中首先设置了他的基本样式，下面为加入:active伪类后需要修改的样式。未点击时：...

CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始，会利用几个篇幅，我将跟大家分享从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。下一篇文章，我会带领大家开发一个兼容 pc端浏览器和移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！在讲解CSS3中新增的弹性布局...

css块元素和行内元素以及属性详解

div(css layout的主要标签)、dl(定义列表) 、h1~h6(标题)、p(段落)、table(表格) , ul(非排序列表)特点: 会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子内联元素(inline element) a(超链接)、span(常用内联容器，定义文本内区块)、i(斜体)、img、em(强调)、label特点: 和其他元素都在一行上、元素的高度、宽度、行高及顶部和底部边距不可设置、元素的宽度就是它包含的文字或图片的宽度...

[转]CSS3盒模型display:box详解【代码】

时间：2014-02-25来源：网络作者：未知编辑：RGBdisplay:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。一、box-flex属性box-flex主要让子容器针对父容器的...

CSS基础（七）：z-index详解【代码】【图】

概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。层级关系的比较1. 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。3. IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。4. z-i...

CSS Sprites详解

CSS Sprites技术不新鲜，早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传，后来出来个 14 Rules for Faster-Loading Web Sites , 技术人员之间竞相传阅，其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内很多blog都提到CSS Sprites，最著名的例子莫过于 http://www.go...

css权重问题例子详解【代码】

首先，id选择器权重级别最高，class选择器其次，html选择器最后。例子：<div ><div ><div ><span>嘿嘿嘿</span></div></div> </div> 选中span标签当选中span标签，也可能权重相同，也可能不同，得分下面2种情况。1.权重相同，谁在后面谁决定。（下面例子嘿嘿嘿的字体颜色为黄色）<style>div.t2 span { color:red;}div.t1 span {color:yellow;} </style> 2.权重不同，权重大的决定。（下面例子嘿嘿嘿的字体颜色为黄色）<style>/...

IE浏览器专有css属性之zoom详解

zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题，功能相当于overflow:auto，同样也可以用height:1%来代替zoom:1。所以一般要在浮动元素的父元素加上overflow:auto；zoom:1; 。这样，子元素浮动，父元素再也不会不自动跟子元素扩大了。Zoom的使用方法：复制代码代码如下:zoom :? normal | numbernormal :　默认值。使用对象的实际尺寸number :　百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相...

CSS3 Filter详解（改变模糊度亮度透明度等方法）【代码】【图】

CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效果有：grayscale 灰度值为0-1之间的小数 sepia 褐色　　　　　　值为0-1之间的小数saturate 饱和度　　　　值为numhue-rotate 色相旋转　　值为angl...

css中伪类/伪元素详解

一、伪类和伪元素伪类和伪元素都是用来修饰不在文档树中的部分，区别在于，伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的(如:hover/:active)。而伪元素则用于创建一些不在文档树中的元素，并为其添加样式(如:before/:after)。二、常用伪类伪类用法兼容:link未访问的链接主流浏览器都支持:visited已访问的链接主流浏览器都支持:hover鼠标划过链接主流浏览器都支持:active 已选中...

CSS - 技术教程分类

CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class选择器 CSS 创建 CSS Backgrounds(背景) CSS Text(文本) CSS Fonts(字体) CSS 链接(link) CSS 列表 CSS Table(表格) CSS 盒子模型 CSS Border(边框) CSS 轮廓（outline）属性 CSS margin(外边距) CSS padding（填充） CSS 尺寸 (Dimension) CSS Display(显示) CSS Position(定位) CSS Overflow CSS Float（浮动） CSS 对齐 CSS 伪类 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 提示工具 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网页布局 CSS 总结 CSS 实例 Viewport 媒体查询图片视频(Video) 框架 CSS 参考手册 CSS 选择器 CSS Web安全字体 CSS 动画 CSS 单位 CSS 颜色 CSS 颜色值 css 全部

CSS - 最热教程

设置DIV的背景色有哪几种方法 js批量设置元素样式和封装似于jquery的...HTML5实战与剖析之CSS选择器——getEle...css如何设置文本元素内的空白填充？如何压缩css文件 cssright属性怎么用 cssanimation-timing-function属性怎么...jquery设置内联样式css()jQuery+HTML5+CSS3制作支持响应式布局时...jquery实现动态改变css样式的方法分析

首页 / CSS / CSS内边距外边距代码详解

CSS内边距外边距代码详解

内容导读

内容图文

本文主要和大家分享css之内边距与外边距，本文运用了多个实例与代码，希望能帮助到大家。

外边距:

代码示例:

微博三列布局

内边距

背景色样式:

外边距的坑:

比如没有border的代码:

此时结果截图:

此时运行结果截图:

结果截图:这个结果是宽200 高200时的结果,此时没有设置内边距

设置内边距时的代码:此时将边框顶边的内边距设置为50

代码示例:

结果截图:此时外边框的高变为了250,外边框顶边距内边框顶边的距离为20+50=70像素

结果截图:此时的结果不太明显

外边距的另一个坑:

结果截图:

六环练习

内容总结

内容备注

内容手机端

【CSS内边距外边距代码详解】教程文章相关的互联网学习教程文章

CSS - 相关标签

CSS - 技术教程分类

CSS - 最新教程

CSS - 最热教程