精华内容
下载资源
问答
  • 以两个并排显示的div为例说明. 现在两个div都有背景颜色,...若是想要右边div中的p右边div的边界有一定距离, 则给div内边距padding复制. 通过这个栗子就能比较好的区分margin和padding的用法了. 转载于:https:/...

    以两个并排显示的div为例说明.

    现在两个div都有背景颜色, 右边的div中有几行p,

    若是想要使两个div之间有间隔, 即两块带了颜色区域之间产生空隙, 则给div的css中外边距margin赋值;

    若是想要右边div中的p与右边div的边界有一定距离, 则给div的内边距padding复制. 

    通过这个栗子就能比较好的区分margin和padding的用法了.

    转载于:https://www.cnblogs.com/tiny-rogue/p/3282579.html

    展开全文
  • 页面布局之盒子模型——核心padding 内边距padding会撑开盒子不让padding撑开盒子padding属性的设置padding属性的应用——导航栏margin 外边距 padding 内边距 padding会撑开盒子 padding实际上是内容边框的距离。...

    padding 内边距

    padding会撑开盒子

    padding实际上是内容与边框的距离。设置padding,即设置了内容与边框的距离,则本质上是“撑开”了盒子。故盒子会变大!

    仅设置content和border的块状元素div
    设置content内容区的宽度高度,并且设置了margin-top,margin-left,以及设置了1px的红色实线边框。

    div{
        width: 100px;
        height: 110px;
        margin-top: 30px;
        margin-left: 30px;
        border:1px solid red;
    }
    

    如图:
    在这里插入图片描述
    若设置了padding,会撑大盒子!

    div{
        width: 100px;
        height: 110px;
        padding: 30px;
        margin-top: 30px;
        margin-left: 30px;
        border:1px solid red;
    }
    

    在这里插入图片描述
    蓝色部分是content,绿色部分是向外额外撑开的padding,绿色与橙色交界是原本的border。
    如果给盒子设置了宽度和高度(针对content),再设置padding,则会撑开盒子。

    不让padding撑开盒子

    如何既能让content与border保持距离,但又不额外撑开盒子,使得盒子变大而影响布局呢。

    用height和width减去设置的padding值即可解决问题。

    padding属性的设置

    可分别单独设置四个方向的padding

    div{
        width: 100px;
        height: 110px;
        padding-top: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
        padding-right: 10px;
        margin-top: 30px;
        margin-left: 30px;
        border:1px solid red;
    }
    

    分别设置了padding-top,padding-left,padding-bottom,padding-right。
    也可一起设置padding,上面代码等价于

    div{
        width: 100px;
        height: 110px;
        padding:10px;
        margin-top: 30px;
        margin-left: 30px;
        border:1px solid red;
    }
    

    padding:10px表示上右下左都有10px的内边距。
    另外几种设置方式

    1. padding:5px 10px; 上下为5px,左右为10px
    2. padding:5px 10px 15px;上为5px,左右为10px,下为15px;
    3. padding:5px 10px 15px 20px;上右下左分别为5px,10px,15px,20px (顺时针)

    padding属性的应用——导航栏

    先上代码

        <a href="#">首页</a>
        <a href="#">朋友圈</a>
        <a href="#">QQ空间</a>
        <a href="#">呵呵呵呵呵呵</a>
    
    body{
        font-size: 0;
    }
    
    a{
        display:inline-block;
        height: 30px;
        padding: 0 20px;
        line-height: 30px;
        font-size: 15px;
        text-decoration: none;
        background-color: pink;
    }
    

    在这里插入图片描述
    text-decoration:none 是为了去掉 a 标签的下划线。
    line-height:30px;与height相等,是为了使文本垂直居中
    既然要设置height,而a是行内元素,无法设置高度,故要对元素进行模式转换!
    转化成block元素则没法横向排列,故转化为inline-block。

    转化成inline-block,又会出现间隙,故要父元素font-size:0,子元素a标签另外设置font-size
    每个导航栏的字数不一样多,3个,4个,5个,6个,若给定宽度会很不方便
    所以只设置padding,根据content的宽度再去撑开盒子即可

    如图我给定了宽度width:100px;
    在这里插入图片描述
    非常丑

    margin 外边距

    margin的叠加

    margin外边距叠加,分以下三种

    1. 同级元素外边距叠加
    2. 父子元素外边距叠加
    3. 空元素外边距叠加

    margin外边距叠加的规则如下:

    1. 水平margin,即margin-left,margin-right永远不会发生叠加
    2. 只有margin-top,margin-bottom会在这三种情况下发生叠加
    3. 外边距叠加之后,外边距高度等于两个外边距最大的那个值
    4. 外边距叠加,与inline元素无关,因为行内元素的margin-top,margin-bottom无意

    同级元素外边距叠加的实例:

        <div class="box1">aaaa</div>
        <div class="box2">bbbb</div>
    

    首先,设置两个块级元素盒子。

    .box1{
        width: 100px;
        height: 100px;
        /* margin-bottom: 30px; */
        background-color: pink;
    }
    .box2{
        width: 100px;
        height: 100px;
        /* margin-top: 20px; */
        background-color: skyblue;
    }
    

    再者,设置CSS样式,设定width,height,background-color,先不设置margin。

    看看效果:
    在这里插入图片描述
    设置margin值,粉色为30px.蓝色为20px,如下:

    .box1{
        width: 100px;
        height: 100px;
        margin-bottom: 30px;
        background-color: pink;
    }
    .box2{
        width: 100px;
        height: 100px;
        margin-top: 20px;
        background-color: skyblue;
    }
    

    在这里插入图片描述
    橙色那块是粉色盒子的margin-bottom:30px;“吃掉”了蓝色的margin-top。

    同样父子元素外边距叠加,也遵循以上规则。

    如何解决?

    1. 为父元素定义上边框 border-top
    2. 为父元素定义上内边距 padding-top
    3. 为父元素添加overflow:hidden

    关于margin,除了外边距叠加的知识,还有水平居中负margin技巧

    可另外看以下链接

    展开全文
  • 内边距padding的意思是: 边框内容之间的距离。外边距margin的意思是:边框边框之间的距离。拓展资料外边距margin左边距 margin-left:数值 | autoauto:即距离这个边最远的距离;右边距: margin-right:数值 | ...

    内边距padding的意思是: 边框与内容之间的距离。

    外边距margin的意思是:边框与边框之间的距离。拓展资料

    外边距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);

    例子:

    6b957a490434432654ac8dffcde99270.png

    内边距padding

    padding属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。

    按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值,例如:

    h1 {padding: 10px 0.25em 2ex 20%;}

    内边距也通过使用下面四个单独的属性,分别设置上、右、下、左内边距

    padding-top 上内边距;

    padding-right 右内边距;

    padding-bottom 下内边距;

    padding-left 左内边距;

    例如:

    h1 {

    padding-top: 10px;

    padding-right: 0.25em;

    padding-bottom: 2ex;

    padding-left: 20%;

    }

    7e33411a169763f1a714a881b2d0d060.png

    展开全文
  • 外边距内边距

    2018-06-15 18:17:00
    内边距: 浏览器结果: ...给div1加上内边距padding --->...结果为:内容的和边框的距离上线左右增加了...外边距:给div1加上内边距margin ---->margin: 30px 浏览器结果:div 边框上线左右其他标签距离...

     内边距:

     

    浏览器结果:

     

     

    给div1加上内边距padding   --->   padding: 30px;

     

     结果为:内容的和边框的距离上线左右增加了30px 下面的div2不变 

     

    外边距:  给div1加上内边距margin ----> margin: 30px

     

     

     浏览器结果:div 边框上线左右与其他标签距离增加了30px  

     

     

     

     

     

     

    转载于:https://www.cnblogs.com/ajaxa/p/9188563.html

    展开全文
  • 盒子模型的外边距与内边距学习笔记 1.外边距margin 盒子盒子之间的间距称为外边距,分四个方向(上右下左-顺时针方向) 属性名 描述 margin-left 距离左侧的距离 margin-right 距离右侧的距离 margin-...
  • padding 属性定义元素边框元素内容之间的空间。...•如果规定两个值,比如 div {padding: 50px 10px} - 上下内边距是 50 px,左右内边距是 10 px。•如果规定三个值,比如 div {padding: 50px 10px 20...
  • 所谓框模型,例如div标签,你就可以直接把它理解成一个...padding:内边距 margin:外边距 图上的element,就是相片。 padding就是相片相框的间距。 border就是相框本身的宽度。 margin就是这个相框和别...
  • CSS---内外边距

    2018-12-11 01:58:00
    CSS---内外边距 1、内外边距含义 内边距div边框内的距离。...内外边距都会撑高父元素,外边距会提高div与div之间的距离 2、利用border做三角形 给空div设置 div{  width:0;  height: 0;  ...
  • CSS内外边距的区别

    2021-05-18 08:13:59
    外边距(Margin):围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。...内边距简单解释就是元素该元素的内容的距离 <!DOCTYPE html> <html> <head> <meta name
  • 内部的子盒子也设置一个外边距margin-top:100px时,会发现子元素并没有如预期所想,父盒子有个边距。反而父盒子相领的盒子的margin取了2者的最大值。 如下所示: <div class="father"> <div class=...
  • 高度,行高以及外边距内边距都可控制; 宽度缺省是它的容器的100% 可以嵌套内联元素和其他块元素 常用的块级元素:div、h1~h6、dl、ul、ol 内联元素(inline): 和其他元素都在一行上;...
  • 3.内边距 padding 4.外边距 margin 5.边框 border 注意 ; 标准盒模型的宽和高盒子真实占有的宽高不是一个概念。 盒子真实占有的宽:内容的宽+左padding+右padding+左边框+右边框 盒子真实占有的高:内容的高+上...
  • 前言:关于边距问题,有很多小白有许多误解,当然秧子也有!不过不要因为害怕不去触碰这些,这种行为是不理智的!!! 一,什么是BFC?  BFC全称Block Formatting Context ,直译“块级格式化上下文”,也有译作...
  • 即:内边距 width\height:文字输入的空间的长宽 border-width:盒子边框厚度 二、外边距 外边距就是html标签层级分层来的; margin margin还可以简写: padding简写也是一样的规则; 说明两个重要的...
  • 内外边距:2.1margin:外部盒子盒子,外边距2.2padding:盒子和物体,那边距2.3Border:边框2.4content:盒子内容,文本图片2.5塌陷问题:只会出现在垂直方向!兄弟塌陷:如果上下两个元素都有设置相对的margin值,...
  • 前几天的晚自习作业遇到这样一个问题,在没有设置任何内边距外边距的情况下,图片和div块元素之间会出现一些间隙,为此和同学讨论到了十一点多才解决了这个间隙问题(真是一把辛酸泪……),来吧,一起看看这些...
  • - 块的上下边距以及外边距内边距都可通过属性或者CSS样式进行控制(盒模型)。 - 块宽度缺省是它的容器的100%,除非设定一个宽度。 - 块可以容纳内联元素和其他块元素,例如&lt;p&gt;标签内可插入&lt;...
  • 盒子的四要素:内容、内边距(padding)、盒子厚度(border)、外边距(margin) 注:1. 在使用盒子时,margin要素有一定的弊端(也就是margin塌陷)。例: <!DOCTYPE html> <html> <head> ...
  • 单元8使用DIV+CSS布局网页 任务8.1设计诗词...8.1.1 盒子模型 CSS+Div网页布局的精髓在于盒子模型盒子模型Box Model用于描述一个为HTML元素形成的矩形盒子盒子模型还涉及为各个元素调整外边距margin边框border内边距pa
  • 一、盒子模型 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。 W3C组织建议把网页上元素看成是一个个盒子。 盒模型主要定义四个区域: 内容content 内边距padding ...外边距margin=两个...
  • margin:外边距,就是这个标签其他标签之间的距离 padding:内边距,标签内部边距 为了各浏览器的兼容性,最好每次在css文件的顶部加入,只要用到标签就应该加入下面的重置 div,body { margin:0; padding...
  • 前端part1-div布局

    2017-03-19 21:50:00
    1.div和span DIV和span的区别在,span是内联元素,div是块级元素 2.盒模型 margin盒子外边距padding盒子内边距border盒子边框宽度wid...
  • 所有页面中的元素都可以看成是一个盒子占据着一定的页面空间一般来说这些被占据的空间往往都要比单纯的内容要大因为盒子可以有边框盒子内外都可以有...border边框padding填充也叫内边距和margin外边距这4个部分组成如图所示...
  • 盒子的大小由内容,内边距和边框决定,外边距只是用来吧周围的东西挤开并不算在盒子的大小里面。也就是说外边距自身有关,并不影响其他盒子的距离计算。 换句话说就是上下两个div设置margin,最终的距离由大的...
  • 在谈论CSS布局时,我们需要提前知道一些东西。...② 高度,行高以及外边距内边距都可控制; block(块)元素的特点 效果: ③ 宽度缺省是它的容器的100%,除非设定一个宽度。 ④ 它可
  • 一文搞懂DIV盒子

    2019-12-13 22:58:17
    一文搞懂DIV盒子 话不多说,我们直接上图 一个DIV盒子=Content+padding+border+...margin:外边距(一个盒子另一个盒子之间的距离:上、下、左、右) padding(速写属性) 1.padding:100px 200px 100px 200px(上...
  • bootStrap 文件引入

    千次阅读 2017-05-25 17:51:46
    一般需引入以下四个文件` ` Jquery 文件必须在bootstrap的js文件之上,因为bootstrap的js文件是基于Jquery的 在底层div上应养成调用.container的习惯,这关系到你的布局,与各div内边距与外边距
  • 页面设计遇到的一些问题: 1、div悬浮感、div浮动(变成行内块)、清除浮动 样式: box-shadow: 2px 2px 5px #bbb; float: left;...3、内边距,内容边框的距离 padding: 20px; 4、给div元素添加...
  • CSS2 3 div+css布局

    2015-10-13 22:00:40
    一,无意义的标签div ,span div:大的区域的意思,默认换行 span:小的行内的意思,默认不换行 ...内容边框的距离(内边距),padding 盒子盒子之间的距离(外边距) margin 三,ie和其他浏览器中宽度高度问题 ie...
  • (2)当块一块二均设有float属性,且其值相反时, 块一块二在同一行上并分部...(4) 当块一块二设置宽度时, 块一块二的宽度之和不能超出外层宽度减去两个外层的内边距之和,再减去两个块一的外边距之和,再减去两个块

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 155
精华内容 62
关键字:

div内边距与外边距