重新认识margin-top和margin-bottom

margin-top和margin-bottom是HTML网页设计中常用的两个样式属性，提起margin和padding的区别想来无人不知无人不晓，那么让我们实现如下功能：

1、“应付总额”所在div距父div的距离为20px;

2、“寄送至”所在div距离上面兄弟div的距离为10px；

3、“寄送至”所在div距离父div的距离为20px;

有些童鞋会不假思索的这样写代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>重新认识margin-top和margin-bottom</title></head><body><div style="background-color:red;"><div style="margin-top:20px;">应付总额： ￥45.00</div><div style="margin-top:10px;margin-bottom:20px;">寄送至： 中国 河南省郑州市金水区</div></div></body>
</html>

浏览器渲染后的效果如图所示：

看到这个图是不是很吃惊：我们只实现了第二个要求，为什么会这样？一句话，我们对margin-top和margin-bottom的真实作用还没有充分的认识：margin-top用于设置其所作用的标签的上外距离，可是该上外边距相对于谁呢？是父div吗？呵呵呵，不是，因为该父div没有边界，对于margin-top来说根就参照不了，其实现在参照的是body;margin-bottom同样如此。可以如何解决这个问题呢？

第一种方法：最简单的方式是为父div添加边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>重新认识margin-top和margin-bottom</title></head><body><div style="background-color:red;border:2px solid green;"><div style="margin-top:20px;">应付总额： ￥45.00</div><div style="margin-top:10px;margin-bottom:20px;">寄送至： 中国 河南省郑州市金水区</div></div></body>
</html>

浏览器渲染后的效果如图所示：

第二种方法：使用padding-top和padding-bottom实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>重新认识margin-top和margin-bottom</title></head><body><div style="padding-top:20px;padding-bottom:20px;background-color:red;"><div>应付总额： ￥45.00</div><div style="margin-top:10px;">寄送至： 中国 河南省郑州市金水区</div></div></body>
</html>

浏览器渲染后的效果如图所示：

重新认识margin-top和margin-bottom相关推荐

在才开始进入前端这个坑的时候在布局中会遇到很多问题我才入这个坑的时候在margin top 中遇到几个bug 我分享一下...
margin top的bug 当子元素和父元素是纯元素没有内容的时候,我们去调整子元素的margin:top, 他会误以为是要调整父元素解决方案: 1.给父元素设置一个边框 2.父元素加overf ...
css margin属性,css margin属性怎么用？css margin属性用法教程
在css中,有一个重要的属性margin,很多人都不知道css margin属性是什么?怎么用,下面为您总结一下css margin属性用法教程. margin是css用于在一个声明中,对所有css ...
解决margin塌陷的问题_解决margin塌陷与margin合并（margin）清除浮动问题
**1.margin塌陷** 问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生 ...
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
“extensive margin” 和 “intensive margin”
广延边际是讲在某一价格下,消费者购买或是不购买,体现了ex-:集约边际是讲,在一组价格下,购买多少的问题,体现了in-.比如,毒品的市场需求就是一个广延边际的问题(某一价格下吸不吸的选择):而对于吸毒 ...
关于margin: auto及margin: 0 auto的一些见解
在写css时margin:auto;使用频率非常高,常用于div的居中. 何为margin? margin是指块级元素的外边距,如下图所示,XXXXX是div中的内容,通过设置margin的值,可控制 ...
margin:auto 和margin:0 auto的区别
1.意思不同.margin:auto=margin:auto auto auto auto,表示上下左右都为auto:margin:0 auto=margin:0 auto 0 auto,表示上下为0 ...
左右margin top问题百分比值
不想说今天心情有多差! 9点多開始发现一个"bug",需求是依据屏幕高度动态调整某个div的位置.代码大概是这种. <div style="margin-top: ...
css【详解】—— margin属性（含margin合并，margin：auto，margin失效）
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2. 父级和第一个/最后一个子元素阻止margin-top合并的方法阻止margin-bottom合并的方法 3. 空块级元素的m ...
margin塌陷与margin合并、浮动流
一.margin 塌陷父子嵌套元素,垂直方向的margin,父子会粘合在一起,取最大的值.子级不能根据父级定位,好像父级没有棚. 解决方案,触发bfc(block format context),使 ...

重新认识margin-top和margin-bottom

重新认识margin-top和margin-bottom相关推荐

最新文章

热门文章