精华内容
下载资源
问答
  • 外边距合并

    2020-08-12 15:22:44
    注意: 行内元素是只有左右外边距的,是没有上下外边距的。 内边距,在ie6等低版本浏览器也会有问题。 我们尽量不要给行内元素指定上下的内外边距就好了。 二、外边距合并 使用margin定义块元素的垂直外边距时,可能

    一、清除元素的默认内外边距

    为了更方便地控制网页中的元素,制作网页时,可使用如下代码清除元素的默认内外边距:

    					{
    					   padding:0;         /* 清除内边距 */
    					   margin:0;          /* 清除外边距 */
    					}
    

    注意: 行内元素是只有左右外边距的,是没有上下外边距的。 内边距,在ie6等低版本浏览器也会有问题。

    我们尽量不要给行内元素指定上下的内外边距就好了。

    二、外边距合并

    使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。

    1.相邻块元素垂直外边距的合并

    当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

    解决方案: 避免就好了。

    2.嵌套块元素垂直外边距的合并

    对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。

    解决方案:

    1. 可以为父元素定义1像素的上边框或上内边距。
    2. 可以为父元素添加overflow:hidden。
    展开全文
  • css样式中的margin也就是css中外边距外间距属性,顾名思义,就是控制div块...下面我们通过具体的代码示例详细解说css中margin属性即css外边距属性的具体用法代码示例:css中的margin属性使用示例.demo{width:300p...

    css样式中的margin也就是css中外边距外间距属性,顾名思义,就是控制div块或者各元素之间上下左右的距离,显然margin在css中的作用不容小觑。本篇文章就给新手小白介绍关于cssmargin属性的具体用法。希望对大家有所帮助。

    下面我们通过具体的代码示例详细解说

    css中margin属性即css外边距属性的具体用法代码示例:

    css中的margin属性使用示例

    .demo{

    width:300px;height:100px;

    background-color:#ccccff;

    }

    .demo1{

    margin-left:50px;

    margin-top:50px;

    margin-bottom:50px;

    width:300px;height:100px;

    background-color:#b2ecef;

    }

    .demo2{

    width:300px;height:100px;

    background-color:#94ef9a;

    }

    .demo1p{margin-left:50px;

    }

    没有给这个div块设置margin值

    展开全文
  • 外边距产生的原因: 为了编写代码美观 每个标签独占一行 换行和空格符号解析成一个空格 解决的办法 1: 让其他标签紧跟着上一个标签 2: 通过外边距设置左右外边距为负数 3: 在父元素设置字体大小为0 ...

    外边距产生的原因:

    为了编写代码美观 每个标签独占一行 换行和空格符号解析成一个空格


    解决的办法

    1: 让其他标签紧跟着上一个标签
    2: 通过外边距设置左右外边距为负数
    3: 在父元素设置字体大小为0 子元素必须重写设置字体大小

    转载于:https://www.cnblogs.com/baixuezhemei/p/waibianju.html

    展开全文
  • 清除元素的默认内外边距... /* 清除外边距 */ } 注意: * 行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距。 <!DOCTYPE html> <html lang="en"> <head> <meta...

    清除元素的默认内外边距(重要)

    为了更灵活方便地控制网页中的元素,制作网页时,我们需要将元素的默认内外边距清除

    css代码:
    * {
       padding:0;         /* 清除内边距 */
       margin:0;          /* 清除外边距 */
    }

    注意:  

    * 行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	  /*这是一个神奇的代码  我们以后写css 第一句话*/
    	  * {
    	  	margin: 0;
    	  	padding: 0;
    	  }
    	  span {
    	  	 margin: 30px;
    	  }
    	</style>
    </head>
    <body>
    	一个问题
    	<p>又是一个问题</p>
    	<span>  行内元素 尽量只设置左右内外边距, 不要设置上下内外边距。</span>
    </body>
    </html>

    外边距合并

    使用margin定义块元素的**垂直外边距**时,可能会出现外边距的合并。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.top,
    		.bottom {
    			width: 200px;
    			height: 200px;
    			background-color: pink;
    		}
    		.top {
    			margin-bottom: 100px;
    		}
    		.bottom {
    			background-color: purple;
    			margin-top: 50px;
    		}
    	</style>
    </head>
    <body>
    	<div class="top"></div>
    	<div class="bottom"></div>
    </body>
    </html>

    本来应该是两个盒子之间是150px.现在是100px,发生了合并。

    1). 相邻块元素垂直外边距的合并

    - 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
    - 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和
    - **取两个值中的较大者**这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

     <img src="media/www.png" />

    **解决方案:尽量给只给一个盒子添加margin值**。

     (2). 嵌套块元素垂直外边距的合并(塌陷)

    - 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
    - 父元素的上外边距会与子元素的上外边距发生合并
    - 合并后的外边距为两者中的较大者

     <img src="media/n.png" />

    **解决方案:**

    1. 可以为父元素定义上边框。
    2. 可以为父元素定义上内边距
    2. 可以为父元素添加overflow:hidden。

    还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题,后面咱们再总结。。

    如果没有加入得话。

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.father {
    			width: 500px;
    			height: 500px;
    			background-color: pink;
    			/*嵌套关系 垂直外边距合并  解决方案 */
    			/*1. 可以为父元素定义上边框  transparent 透明*/
    			/*border-top: 1px solid transparent;*/
    			/*2. 可以给父级指定一个 上 padding值*/
    			/*padding-top: 1px; */
    			/*3. 可以为父元素添加overflow:hidden。*/
    			
    		}
    		.son {
    			width: 200px;
    			height: 200px;
    			background-color: purple;
    			margin-top: 100px;
    		}
    	</style>
    </head>
    <body>
    	<div class="father">
    		<div class="son"></div>
    	</div>
    </body>
    </html>

     

     没有加入比如浮动、固定、绝对定位的盒子的话就没法出现效果。

    以下是加入之后的效果:

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.father {
    			width: 500px;
    			height: 500px;
    			background-color: pink;
    			/*嵌套关系 垂直外边距合并  解决方案 */
    			/*1. 可以为父元素定义上边框  transparent 透明*/
    			/*border-top: 1px solid transparent;*/
    			/*2. 可以给父级指定一个 上 padding值*/
    			/*padding-top: 1px; */
    			/*3. 可以为父元素添加overflow:hidden。*/
    			overflow: hidden;
    		}
    		.son {
    			width: 200px;
    			height: 200px;
    			background-color: purple;
    			margin-top: 100px;
    		}
    	</style>
    </head>
    <body>
    	<div class="father">
    		<div class="son"></div>
    	</div>
    </body>
    </html>

      盒子模型布局稳定性

    - 学习完盒子模型,内边距和外边距,什么情况下用内边距,什么情况下用外边距?

      - 大部分情况下是可以混用的。  就是说,你用内边距也可以,用外边距也可以。 你觉得哪个方便,就用哪个。

    我们根据稳定性来分,建议如下:

    按照 优先使用  宽度 (width)  其次 使用内边距(padding)    再次  外边距(margin)。   

    ```
      width >  padding  >   margin   
    ```

    - 原因:
      - margin 会有外边距合并 还有 ie6下面margin 加倍的bug(讨厌)所以最后使用。
      - padding  会影响盒子大小, 需要进行加减计算(麻烦) 其次使用。
      - width   没有问题(嗨皮)我们经常使用宽度剩余法 高度剩余法来做

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • 这篇文章给大家讲述了web前端开发中CSS margin(外边距)的教程。 CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间。 margin margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。 ...
  • 外边距塌陷也叫做外边距合并,它是指两个在正常流中相邻的具有兄弟或者父子关系的块级元素的外边距组合起来变成了单个外边距。但是只有上下外边距才会有塌陷,左右外边距不会出现这个问题。 那么我们还是先来看看...
  • 最常见且最容易发现的额一个bug是IE 6和最低版本中的双外边距浮动bug。这个bug是任何浮动元素上的外边距加倍。 上面代码中,div盒子向左边浮动,设置的margin-left的值是10px。在chrome浏览器,Firefox浏览器中:...
  • 图片居中平均分配[消除两边边距的办法}###目前看到过两种方法,如果还有小伙伴们欢迎在下面留下代码,或者思路。谢谢; 今天我在做四张图片平均分配本来算好的用25%,然后图片在百分之里面向右边移动一点像素。放在...
  • 外边距实现居中对齐 让一个盒子实现水平居中,需要满足以下两个条件: 必须是块级元素 盒子必须指定宽度(width) 然后给左右的外边距都设置为auto,就可以使盒子水平居中。 实际工作中经常使用这种方式进行网页...
  • 当我们使用边框的时候,如果盒子相邻在一起,就会造成边框重叠加粗的问题,原本的1px的...margin负值实例代码 <style> div { width: 200px; height: 300px; border: 1px solid #ccc; } </style> <
  • 引子最近看了一眼最新的面试题,准备秋招,发现了一个比较老的题,就是div+css经典布局的二列式布局和三列式布局,比如:两列...这不很好写么,比如我以前这么写 /*css代码*/ body{ margin:0; padding:0; } .lef
  • 本篇文章给大家带来的内容是关于div标签:水平居中和垂直居中的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。...​zhuanlan.zhihu.com水平居中实现margin:0 autoauto表示外边距左右...
  • margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并,而行内元素实际上不占...
  • margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并,而行内元素实际上不占...
  • ie6双边

    2017-06-04 16:59:30
    ie6双边距 在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的2 0像素,而是40像素,如下图: 其实这是IE6的一个BUG(IE6双倍边距BUG),... 3)要有左外边距(margin-left);   解决这个BUG很容易,只需要在相
  • CSS代码缩写

    2018-02-08 10:05:00
     盒模型代码简写:主要包括内边距(补白)、边框、外边距(边界)三类。  从方向的属性有:上、下、、右。  从描述可以分为:颜色、大小和样式。而内边距和外边距只有大小。 缩写最后一个单词,如: ...
  • 1、IE6双边距触发条件: 1)块级元素浮动 2)有左右外边距(上下外边距不存在问题)  3)当有多个同行的浮动元素,切方向相同,则只有浮动方向最边缘的元素会有产生双边距bug;  2、 请用IE6狠点这里查看具体现象...
  • 上下左右外边距全为10px; 两个值: margin:10px 20px; 第一个值:设置上下外边距 第二个值:设置左右外边距 三个值: margin:10px 20px 30px; 第一个值:设置上外边距 第二个值:设置左右外边距 第三个值:...
  • HTML5 代码缩写

    千次阅读 2017-03-02 16:05:09
    盒模型代码简写盒模型外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下。 拿margin示例:margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下...
  • 盒模型代码简写

    2019-10-06 14:53:52
    还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下。具体应用在margin和padding的例子如下: margin:10px 15px 12px 14px;/*上设置为...
  • CSS之代码简写

    2016-01-07 17:53:21
    CSS代码简写,占用更少的宽带 **盒模型代码简写** 还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下。 具体应用在margin和padding的...
  • 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。 <!DOCTYPE ...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 217
精华内容 86
热门标签
关键字:

左外边距代码