zoukankan      html  css  js  c++  java
  • 为什么行内元素不能设置margin-top/margin-bottom/padding-top/padding-bottom?

    HTML 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element)。
    - 替换元素是指用作为其他内容占位符的一个元素。最典型的就是img,它只是指向一个图像文件。以及大多数表单元素也是替换,例如input等。
    - 非替换元素是指内容包含在文档中的元素。例如,如果一个段落的文本内容都放在该元素本身之内,则这个段落就是一个非替换元素。

    讨论margin-topmargin-bottom对行内元素是否起作用,则要对行内替换元素和行内非替换元素分别讨论。

    首先我们应该明确外边距可以应用到行内元素,规范中是允许的,不过由于在向一个行内非替换元素应用外边距,对行高(line-height)没有任何影响。由于外边距实际上是透明的。所以对声明margin-topmargin-bottom没有任何视觉效果。其原因就在于行内非替换元素的外边距不会改变一个元素的行高。而对于行内非替换元素的左右边距则不是这样,是有影响的。

    而为替换元素设置的外边距会影响行高,可能会使行高增加或减少,这取决于上下外边距的值。行内替换元素的左右边距与非替换元素的左右边距的作用一样。

    对于行内元素,设置左右内边距,左右内边距将是可见的。而设置上下内边距,设置背景颜色后可以看见内边距区域有增加,对于行内非替换元素,不会影响其行高,不会撑开父元素。而对于替换元素,则撑开了父元素

    一点一滴累积,总有一天你也会成为别人口中的大牛!
  • 相关阅读:
    BZOJ-2462: [BeiJing2011]矩阵模板 (宇宙无敌超级大暴力~)
    BZOJ-3555: [Ctsc2014]企鹅QQ (hash)
    BZOJ-3098: Hash Killer II (未知)
    [SinGuLaRiTy] 2017 百度之星程序设计大赛 初赛A
    [SinGuLaRiTy] 树链问题
    [SinGuLaRiTy] 2017 百度之星程序设计大赛-资格赛
    [SinGuLaRiTy] NOIP模拟赛(TSY)-Day 2
    [SinGuLaRiTy] NOIP模拟赛(TSY)-Day 1
    [SinGuLaRiTy] 2017-07-26 综合性测试
    [SinGuLaRiTy] NOIP 膜你赛-Day 2
  • 原文地址:https://www.cnblogs.com/fancyLee/p/8068314.html
Copyright © 2011-2022 走看看