精华内容
下载资源
问答
  • 文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性 一、margin-top样式属性 设置元素的上外边距,该属性有多个值: 值 描述 ...

    一、margin-top样式属性

    设置元素的上外边距,该属性有多个值:

    描述
    auto 浏览器设置的上外边距。
    length 定义固定的上外边距。默认值是 0。允许使用负值。
    % 定义基于父对象总高度的百分比上外边距。
    inherit 规定应该从父元素继承上外边距。注:IE浏览器都不支持"inherit"属性值 。

    示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-top</title>
    		<style type="text/css">
    			div{border-style: dotted;}
    			.two{margin-top:36px;}
    		</style>
    	</head>
    	<body>
    		<div class="one">第一个div</div>
    		<div class="two">第二个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    二、margin-right样式属性

    设置元素的右外边距, 该属性有多个值:

    描述
    auto 浏览器设置的右外边距。
    length 定义固定的右外边距。默认值是 0。允许使用负值。
    % 定义基于父对象总高度的百分比右外边距。
    inherit 规定应该从父元素继承右外边距。注:IE浏览器都不支持"inherit"属性值 。

    示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-right</title>
    		<style type="text/css">
    			.one{border-style: dotted;margin-right:36px;}
    		</style>
    	</head>
    
    	<body>
    		<div class="one">第一个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    三、margin-bottom样式属性

    设置元素的下外边距,该属性有多个值:

    描述
    auto 浏览器计算下外边距。
    length 规定以具体单位计的下外边距值,比如像素、厘米等。默认值是 0px。允许使用负值。
    % 规定基于父元素的宽度的百分比的下外边距。
    inherit 规定应该从父元素继承下外边距。注:IE浏览器都不支持"inherit"属性值 。

    示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-bottom</title>
    		<style type="text/css">
    			div{border-style: dotted;}
    			.one{margin-bottom:36px;}
    		</style>
    	</head>
    
    	<body>
    		<div class="one">第一个div</div>
    		<div class="two">第二个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    四、margin-left样式属性

    设置元素的左外边距, 该属性有多个值:

    描述
    auto 浏览器设置的左外边距。
    length 定义固定的左外边距。默认值是0。允许使用负值。
    % 定义基于父对象总高度的百分比左外边距。
    inherit 规定应该从父元素继承左外边距。注:IE浏览器不支持"inherit"属性值 。

    示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-left</title>
    		<style type="text/css">
    			.one{border-style: dotted;margin-left:36px;}
    		</style>
    	</head>
    
    	<body>
    		<div class="one">第一个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    五、margin样式属性

    用于在一个声明中设置所有外边距的宽度,或者设置各边上外边距的宽度。该属性有多个值:

    描述
    auto 浏览器计算外边距。
    length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。注:允许使用负值,不过要谨慎使用;
    % 规定基于父元素的宽度的百分比的外边距。
    inherit 规定应该从父元素继承外边距。注:IE浏览器不支持"inherit"属性值 。

    示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-top</title>
    		<style type="text/css">
    			div{border-style: dotted;}
    			.two{margin:10px 30px 60px 150px;}//依次是top、right、bottom、left
    		</style>
    	</head>
    
    	<body>
    		<div class="one">第一个div</div>
    		<div class="two">第二个div</div>
    		<div class="three">第三个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述
    注意:
    1、margin属性可以有1到4个值,如下图所示:
    在这里插入图片描述
    2、margin:0 auto;//水平居中显示。示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>居中显示</title>
    		<style type="text/css">
    			div{
    				width:100px;
    				margin:0 auto;
    				border-style: dotted;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div>第一个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>块级元素垂直居中</title>
            <style>
                .out {
                    height: 600px;
                    border: 2px solid;
                }
                .in {
                    width: 100px;
                    height: 100px;
                    background: red;
                    margin: 250px auto;
                }
            </style>
        </head>
        <body>
            <div class="out">
                <div class="in"></div>
            </div>
        </body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述
    3、*{margin:0;}——取消浏览器为HTML文档中各标签设置的margin默认值,方便后面设置。示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-top</title>
    		<style type="text/css">
    			*{margin:0;}
    			div,p{border-style: dotted;}
    		</style>
    	</head>
    	<body>
    		<div>第一个div</div>
    		<p>第二个div</p>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述
    4、块级元素的垂直相邻外边距会合并(即外边距合并),合并后的外边距间距等于两个外边距高度中的较大者;行内元素实际上不占上下外边距;行内元素的的左右外边距不会合并;浮动元素的外边距也不会合并。示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>外边距的合并</title>
    		<style type="text/css">
    			*{margin:0;}
    			p{border-style: dashed;border-width:1px;}
    			#one{
    				margin-bottom: 100px;
    			}
    			
    			#two{
    				margin-top: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<p id="one">文本段1</p>
    		<p id="two">文本段2</p>
    		<br/>
    		<span>外边距的合并:上面id为one的文段下外边距为100px,id为two的文段上外边距为50px,但从显示的结果上看两者之间的间距取了其中的最大值,而不是两者之和,这就是外边距的合并</span>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			*{
    				margin:0;
    				padding:0;
    			}
    			div{
    				border-style:solid;
    				display:inline;
    			}
    		</style>
    	</head>
    	<body>
    		<div style="margin-left:100px;margin-right:100px;">
    			第一个div标签
    		</div>
    		<div style="margin-left:100px;">
    			第二个div标签
    		</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    展开全文
  • 重新认识margin-top和margin-bottom

    千次阅读 2016-11-18 17:21:08
    重新认识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>
    浏览器渲染后的效果如图所示:
    展开全文
  • padding-bottommargin-bottom

    千次阅读 2016-03-21 21:12:10
    通过设置margin-bottom跟padding-bottom绝对值相同 padding-bottom:200px; margin-bottom:-200px; 能达到同高 html代码 style="height:50px" style="height:100px

    通过设置margin-bottom跟padding-bottom绝对值相同

       padding-bottom:200px;
          margin-bottom:-200px;

    能达到同高

    html代码

    <div id="wrap">
            <div id="left">
                <p style="height:50px">style="height:50px"</p>
            </div>
            <div id="center">
                <p style="height:100px">style="height:100px"</p>
            </div>
            <div id="right">
                <p style="height:200px">style="height:200px"</p>
            </div>
        </div>

    css代码

     #wrap{
          overflow:hidden;
            width:580px;
           
            border: 2px solid black;
        }
        #left,#center,#right{
         padding-bottom:200px;
          margin-bottom:-200px;
        }
        #left {
            float:left;
            width:140px;
            background:#777;
        }
        #center {
            float:left;
            width:300px;
            background:#888;
        }
        #right {
            float:right;
            width:140px;
            background:#999;
        }
        p {color:#FFF;text-align:center; margin:0;}
    其中wrap要设置overflow:hidden,清除float,使wrap包裹里面的div,也把超出的隐藏起来。



    展开全文
  • 当需要子元素与父元素有一些偏移,可以采用绝对定位,这里... 而当不采用relative或者absolute时,可以采用margin-top, margin-bottom进行定位, 这时margin-top有效,但是margin-bottom无效,即使采用负值也无效。

        当需要子元素与父元素有一些偏移,可以采用绝对定位,这里需要设定父元素为relative, 子元素为absolute,

    再采用top, left, 等。


        而当不采用relative或者absolute时,可以采用margin-top, margin-bottom进行定位,

    这时margin-top有效,但是margin-bottom无效,即使采用负值也无效。

    展开全文
  • css 中p元素自带margin-top,margin-bottom,自已什么都没写就有一个上下边距了 ,很不方便,有什么好的方法吗
  • margin-top的值与margin-bottom的值会重合

    千次阅读 2016-08-30 10:53:02
    margin-top的值与margin-bottom的值会重合,比如上面一个DIV的margin-bottom为30px,下面一个DIV的margin-top为15px,那么两个DIV之间不是45px,而是30px。
  • 猜想,待验证: 浏览器默认是从左向右渲染 一个div .box默认是左上对齐,所以margin-right、margin-bottom设置不起作用
  • 2、根节点div的height=100vh时候,margin-bottom在浏览器中正常,在手机上不生效; 在两个容器嵌套时,子集的margin-top作用于父级元素上。代码如下: <style> .box{ background: golden...
  • 假如有一个header的盒子和一个footer的盒子,分别给header盒子margin-bottom:60px;再给footer盒子,margin-top: 15px;读者朋友你觉得这个中间的边距是多少呢? 答案是:60px 因为边距重合在一起了,选最大者,因此...
  • IOS margin-bottom失效

    2019-06-03 10:41:51
    最近做一个H5移动端活动,发现一个问题:H5页面设置了margin-bottom,在模拟器和安卓手机上都是正常的,但是IOS手机上就没有效果,一开始以为是层级问题,改为在父层上设置,但是仍然没有效果。 解决:margin-...
  • 兄弟之间的margin-top 和 margin-bottom 会叠压  所以当给兄弟之间上下排布控制距离的时候 只需要控制器中一个div即可    asd      #a{  margin: 0 auto;  width: 500px;  height: 500px;...
  • 对行内元素设置margin-top 和margin-bottom是否起作用?不起作用。(需要注意行内元素的替换元素img、input,他们是行内元素,但是可以为其设置宽高,并且margin属性也是对其起作用的,有着类似于Inline-block的行为...
  • 首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个与前面的padding- bottom的正值相抵消的负值,父容器设置超出隐藏. 这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度...
  • 1.bottom是指元素与定位元素的距离,而margin-bottom是指同级元素之间的距离。 2.增加margin-bottom的长度,元素整体的高度也会相应增加,在border-box模式中会减少。
  • div+css - CSS标准 - 8.3 Margin properties: margin-top, margin-right, margin-bottom, margin-left, and margin - 8.3边距属性8.3 Margin properties: margin-top, margin-right, margin-bottom
  • IOS margin-bottom失效问题

    千次阅读 2018-12-21 02:42:51
    webAPP中内嵌的H5页面设置margin-bottom,在模拟器及安卓机中的展示效果都与预想的一样。而在iPhone中无论嵌套多少层margin-bottom,均会失效。 原因 参考资料 从IOS8开始,UIView的属性var layoutMargins:...
  • 现象: 给页面底部元素设置margin-bottom 在iOS上失效 解决办法: 给外层元素(page)加padding-bottom
  • 写页面的时候要实现这样一个效果要求:图标之间有一条线进行连接,最上边和最...left,然后每条数据设置一个margin-left的负值,每条数据之间的间距用margin-bottom来设置,具体实现如下&lt;!doctype html&gt...
  • CSS中bottommargin-bottom的区别

    千次阅读 2016-02-16 13:51:27
    bottom是与其包含块的距离,而margin-bottom是与同级的元素的距离
  • 移动端开发底部元素margin-bottom失效解决办法
  • 首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个与前面的padding- bottom的正值相抵消的负值,父容器设置超出隐藏,这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,...
  • question:微信小程序开发过程中,页面底部元素设置margin-bottom在ios下失效。 answer:可给page设置padding-bottom来解决  
  • 关于css 中margin-bottom 失效

    千次阅读 2019-05-16 17:58:25
    项目中发现margin-bottom 在一些情况下会失效后找到的一种解决办法,虽然low了点,但能用(小程序同理) html: <div class="clear"></div> 小程序: <view class="clear"></view> css: ...
  • margin-bottombottom不同

    千次阅读 2015-12-14 19:18:43
    也就是说,在现在所在元素边框的基础上,上下左右分别增加指定宽度的补白,举个例子,若元素本来的高度为10px,我设置了margin-bottom为2px,则该元素下边框增加了2px的补白,即元素的高度增加了2px,为12px
  • margin-bottom 对行内元素是否起作用,则要对行内替换元素和行内非替换元素分别讨论。 首先我们应该明确 外边距可以应用到行内元素 ,规范中是允许的,不过由于在向一个 行内非替换元素 应用外边距,对行高(line-...
  • 第一次在csdn上写博客 最近遇到的一个bug:ios端margin-bottom失效问题。 网上找了资料目前两种方法: 1.用padding-bottom。 2.添加一个div设置宽高
  • 在垂直方向上,margin值合并问题,如果两个同级的...总结:我们在写代码的时候,注意一下,所以在写项目的时候,我们尽量在垂直方向上写一致就可以了,只设置margin-top或者设置margin-bottom就行了,不要两个都写 &lt;...
  • margin-bottom在safari浏览器失效的问题

    千次阅读 2018-03-28 11:01:42
    今天遇到一个bug是底部明明有margin-bottom却无法作用,排查了一下改成用padding可以有效但不找出原因是无法完成这篇博客的问题概要描述:在safari中,当内容高度超出所有父容器时,内容的margin-bottom设置是无效的...
  • 在移动端开发的过程中,经常会有在底部进行一个元素固定定位在,这样我们主体数据有需要设置margin-bottom 去防止主体数据被底部遮挡的情况。 这在android手机中这样设置是完全没有问题的,不过在ios手机上就会出现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 276,316
精华内容 110,526
关键字:

margin-bottom