展开

关键词

margin-bottom

用途 margin-bottom 规定性用于设置标签的底部外边距,可设置负数值。 该属性对设置了 non-replaced 的行内标签无作用,例如: 或 。 语法* value * margin-bottom: 2.5em; * value * margin-bottom: 95%; * Keyword values * margin-bottom: auto 参考 margin例子* HTML * #red { width: 200px; height: 200px; background: red; } #orange { width: 50px; height : 50px; background: orange; margin-bottom: 30px; } #gray { width: 50px; height: 50px; background: gray

20110

margin-right

用途 margin-right 规定该属性用于设置与元素相关联的盒子模型的右外边距,可为负值。 竖直排列相邻的两个盒子模型的外边距会重叠,称为 margin collapsing.语法* value * margin-right: 2.5em; * value * margin-right: 95% ; * Keyword values * margin-right: auto;值值描述此关键词表示一个固定宽度 值: 可以是一个绝对宽度,e.g. in px, 也可以是一个相对宽度, e.g. in : 200px; height: 200px; background: red; } #orange { width: 50px; height: 50px; background: orange; margin-right

16920
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    margin 属性

    用途 margin 规定标签中四个方向的外边距属性。四个外边距属性表示分别为: margin-top, margin-right, margin-bottom,margin-left。 语法* value * max-height: 2.5em; *单值语法 * * value * *二值语法 * max-height: 95%; margin: top horizontal bottom ; *三值语法 * margin: top right bottom left; *四值语法 *值值描述此关键词指定一个固定的外边距高度。 #red { width: 50%; margin: auto; background: red; text-align: center; }

    15110

    Soft Margin SVM

    我们知道Hard Margin SVM的优化目标函数为:?这种可以解决一部分的情况,但是如果存在以下的情况:?红色和绿色的线哪一个更好呢? 有一个绿色的方块离红色方块很近,如果按照上面的hard margin的方法很有可能找到的决策边界是红色的线。但是这样的决策边界,泛化能力可能存在问题。 与Hard Margin的对比:?

    18520

    【前端】:margin

    目录1. margin 特性总结2. 几道笔试题1. margin 特性总结1.1. 这 7 个属性中,只有 margin-left、width、margin-right 能设置为 auto。 如果 margin-left、width、margin-right 同时为 auto,则 margin-left、margin-right 将被设置为 0,width 则要多宽有多宽。 如果 margin-left、margin-right 为 auto,则 margin-left、margin-right 长度相等,元素在父元素内居中显示。 这 7 个属性中的 margin-top、height、margin-bottom 可以设置为 auto。

    22710

    margin-top失效

    关于margin-top失效的解决方法常出现两种情况:(一)margin-top失效先看下面代码: float:left clear:both;margin-top:20px; 两个层box1和box2 网上能找到的两种比较靠谱的解释:1:“在CSS2.1中,水平的margin不会被折叠;垂直margin可能在一些盒模型中被折叠…”2:当第一个层浮动,而第二个没浮动层的margin会被压缩,详见--浮动元素后非浮动元素的 margin的处理。 ◆解决办法:1.box2增加float属性2.box1与box2之间增加一层(二)子元素设置margin-top作用于父容器 clear:both; margin-top:20px;height:50px 直接设置父元素的margin-bottom:-20%;?

    32660

    margin-left 属性

    用途 margin-left 该属性用于设置与元素相关联的盒子模型的左外边距。这个值可以为负值。竖直排列相邻的两个盒子模型的外边距会重叠 margin collapsing。 语法* value * margin-left: 2.5em; * value * margin-left: 95%; * Keyword values * margin-left: auto; margin-left : inherit; margin-left: initial; margin-left: unset;值值描述此关键词表示一个固定宽度 值 : 可以是一个绝对宽度, e.g. in px, 也可以是个相对宽度 width: 200px; height: 200px; background: red; }#orange { width: 50px; height: 50px; background: orange; margin-left

    11610

    margin-top属性

    用途 margin-top 规定设置标签的顶部外边距,可用负值。这个属性对于不可替换的 inline 标签没有效果,比如 或者 。 语法* value * max-height: 2.5em; * value * max-height: 95%; * Keyword values * margin-top: auto;值值描述此关键词设置固定长度 width: 50px; height: 50px; background: orange; } #gray { width: 50px; height: 50px; background: gray; margin-top

    16910

    CSS理解之margin

    Paste_Image.png2.margin重叠margin重叠通常特性:只发生在block水平元素(例如:p、div、list、item标签.....)只发生在垂直方向(margin-topmargin-bottom Paste_Image.png 对最后的子元素设置的margin-top:80px;等同于为父元素设置了margin-top:80px;(父元素的margin-top=0,最后的子元素的margin-top image.png4.CSS margin负值定位1.margin负值下的两端对齐(主要利用了margin可以改变元素尺寸这一特性:正直变小,负值变大)? 2.第二种常见的无效是margin重叠,比如你设置了margin-top当发现没有效果,这就是margin重叠带来的影响。 4.position:absolute与margin,绝对定位元素非定位方向的margin值“无效”,定位方向的margin值是有效的。

    31420

    理解 margin 塌陷和 margin 合并及其解决方案

    今天我们来总结两个不起眼的小问题:margin塌陷和margin合并margin塌陷什么是margin塌陷我们先来看个例子,然后引出什么是margin塌陷需求:在父子元素中,通过marigin让父元素相对左边及顶部各距离 所以叫margin塌陷。一句话总结:父子嵌套的元素垂直方向的margin取最大值。但是有的时候我们不希望有这样的问题,那我们如何解决margin塌陷的问题呢?答案是,我们可以通过触发BFC来解决! 我们发现这两个元素之间,他们的margin-bottom和margin-top合并了,并且显示的是较大值。这种现象被称为margin合并。 因为margin合并和margin塌陷不一样,margin塌陷只添加了CSS,margin合并除了添加CSS,还修改了HTML结构。 比如上面的例子,我们只要设置前面元素的margin-bottom为200px或者后面元素的margin-top为200px即可以上就是关于margin塌陷和margin合并的小结,如有问题烦请留言告知关于本文来源

    12940

    CSS margin合并问题

    margin-top元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-topheight为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom 和 border ,子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。 和 margin-bottom 会折叠。 BFC是不相同的,因此也不会产生margin的折叠。 margin-top的折叠,并作为间距存在于元素的margin-top的上方。

    55930

    CSS Margin塌陷(重叠)

    CSS Margin塌陷(重叠)#1 说明#1.1 什么是Margin塌陷在标准文档流中,竖直方向(是竖直方向,水平方向的不会出现塌陷现象)的margin会出现叠加现象,即较大的margin会覆盖掉较小的 margin,竖直方向的两个盒子中间只有一个较大的margin,这就是margin的塌陷现象。 #2.1 父子关系的盒子正常情况,margin=0的时候 ?----子标签设置 margin-top: 10px ? 即无论给子元素设不设置margin-top值,其都不发生作用,都会作用于父元素身上 解决方法: 为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合为父盒子设定padding 值,抵消掉子元素设置margin值的方式为父盒子添加overflow:hidden为父盒子添加position:fixed为父盒子添加 display:table利用伪元素给子元素的前面添加一个空元素

    15330

    html 边框变粗 margin -1px

    最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解首先我们来看看下面一张图片 ? 这里就可以用margin -1px(取决你边框的宽度)来解决。加入这行代码的样式,如下图?

    81400

    Android:weight,margin,padding详解实例

    math_parent 计算方法,1 - 2 * (16) = 23,1 - 2 * (26) = 13, 1 - 2 * (36) = 0,结果是one占了两份,two占了一份,three什么都没有 margin ,padding详解margin代表是偏移,表示组件离容器偏移量,margin针对的是容器中的组件元素;padding代表是填充,填充的对象针对的是组件中的元素。 结语本文主要讲解 Android:weight,margin,padding详解实例 下面我将继续对其他知识 深入讲解 ,有兴趣可以继续关注小礼物走一走 or 点赞

    21720

    js动态设置margin

    window).height() - $(.login-box-body).height() )2-$(.login-logo).height ())2;        $(.login-logo).css({margin : m1_top + px auto});     $(.login-bottom).css({margin-top: m1_top + px});  下面为随窗口变化动态改变margin     window.onresize window).height() - $(.login-box-body).height() )2-$(.login-logo).height())2;      $(.login-logo).css({margin : m1_top + px auto});      $(.login-bottom).css({margin-top: m1_top + px});     } }); (adsbygoogle =

    1.2K20

    css中margin传递问题

    *{ margin: 0; padding: 0; } .father { width: 200px; height: 200px; background: red; *border: 1px solid blue;* overflow: hidden; *zoom:1; } .son { width: 200px; height: 100px; background: yellow; margin-top

    15910

    何时使用margin和padding?

    margin和padding的意义相信大家都很清楚,可是在具体应用中,到底应该使用哪一个,就比较难于判断了。 这篇文章 说得挺清楚的,在这里翻译一下,供参考。 何时应当使用margin需要在border外侧添加空白时。空白处不需要背景(色)时。上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。 浏览器兼容性问题在IE 5.x、IE6中,为float的盒子指定margin时,左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。

    13520

    盒模型使用margin相关技巧及解决margin-top塌陷问题

    仅供学习,转载请注明出处 margin相关技巧1、设置元素水平居中: margin:x auto; 2、margin负值让元素位移及边框合并练习1、制作一个600*100的盒子,边框1像素黑色,距离浏览器顶部 ; margin-left: 20px; margin-right: 20px; margin-bottom: 20px; } 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 从上面的代码来看,可以看到里面的四个div都有margin-top和margin-bottom,所以两个div加起来按照道理应该是40px,但是由于外边距的这个特性,margin-top会和margin-bottom margin-top 塌陷在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下:1、外部盒子设置一个边框 2、外部盒子设置 这就是传说之中的margin-top塌陷现象。那么怎么解决呢?

    71320

    border、margin、padding属性的区别

    www.cnblogs.comtime-is-lifearchive200801211046817.html http:www.cnblogs.comtianyue3107archive200904221441358.htmlMargin 与 Padding 的区别1.Margin .list1 { width:580px; height:50px; background-color:Red; margin-bottom:100px; padding-left:10px; padding-right

    23920

    css中padding与margin的奥秘

    边框和内容之间的距离就是内边距 注意点: 1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化 2.给标签设置内边距之后, 内边距也会有背景颜色margin: *{ padding:0; margin 100px; border:1px solid red; background: yellow; } div { height: 100px; border: 1px solid red; } .box1{ margin

    10820

    扫码关注云+社区

    领取腾讯云代金券