曾经学过的教程中写明:行内元素的特点有:

1、与其他元素在同一行

2、宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)不可设置

当时对于第二点中的内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)不可设置有一些疑惑,经过验证后,发现这4个属性是可以设置的,但是不建议设置。

如代码所示,行内元素a设置

margin-top:20px;margin-right:20px; 样式中简写为margin:20px 20px 0 0;

padding-top:5px; padding-right:5px;样式中简写为padding:5px 5px 0 0;

  1. <style>
  2. *{padding:0;margin:0}
  3. div.wrap{width:200px;height:200px;border:1px solid red;margin:10px;word-wrap:break-word;}
  4. .inline-element a{margin:20px 20px 0 0;padding:5px 5px 0 0;height:20px;line-height:20px;background:#ccc;}
  5. </style>
  6.  
  7. <div class="wrap">
  8. <span class="inline-element"><a href="">北京</a><a href="">上海</a><a href="">天津</a><a href="">辽宁</a><a href="">吉林</a><a href="">黑龙江</a></span>
  9. </div>

显示如下:图中的行内元素

  1. <a href="">北京</a>

黄色部分为margin、紫色部分为padding;红色线条为border;元素背景色为灰色。

可以看出margin-top和padding-top在边框以外。因为margin的背景色透明,因此margin-top的设置对行内元素的显示不影响;

而padding-top的背景色为灰色,可以看到下方的a元素的背景色会覆盖上方的a元素;如果a元素的背景色是透明色的话,那么padding-top值设置对行内元素的显示也不影响。

因此我们要记住:对于行内元素尽量不要设置margin-top、margin-bottom;padding-top、padding-bottom值;

行内元素为何不能设置margin-top、margin-bottom;padding-top、padding-bottom值的更多相关文章

  1. 行内元素(inline标签)设置了行高为什么不生效,还是表现为父盒子的行高?行内元素行高问题终极解释

    最近在看张鑫旭大佬的<css世界>,读到5.2.4  内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...

  2. 两个行内元素在一起,会出现一定的间距,即使将border、padding、margin都设置为零也无济于事,那么怎么才能去除这些间距呢?

    首先这里的div设置为了行内块元素,span本身为行内元素,并且设置了* {padding: 0; margin: 0;},那怎么清除元素之间的空白缝隙呢?? (1)给元素加浮动 <!DOCTY ...

  3. 行内元素的上下margin 和 img元素的上下margin

    行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bott ...

  4. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  5. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  6. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  7. CSS--块级元素和行内元素

    相同:设置后,对应的模块都会脱离文档流 不同点:position相应的块级元素会覆盖下面的内容(文字,),而float只会覆盖块级元素,里面的文字会脱离 出来 float是浮动定位,position是 ...

  8. 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  9. [HTML/CSS]盒子模型,块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

随机推荐

  1. 触动精灵 alilib

    --gethtml function gethtml (url) local sz = require("sz") local http = require("szock ...

  2. insertRule()与addRule()创建规则

    要向现有的样式表中添加新规则,需要使用insertRule()方法.这个方法接受两个参数:规则文本和表示在那里插入规则的索引.下面是一个例子: sheet.insertRule("body ...

  3. jquery 高亮

    <ul> <li id="0">冬瓜很好吃</li> <li id="1">西瓜不好吃</li> & ...

  4. Shell script fails: Syntax error: “(” unexpected

    Shell script fails: Syntax error: “(” unexpected google 一下. http://unix.stackexchange.com/questions/ ...

  5. HTTPclient cookie的获取与设置

    因为代码与Java用apache的HttpClient发送Post请求大部份重复,所以就不贴整段代码了,只把不同的地方贴出来.发送Cookie就必须先得到Cookie,所以至少发送两次请求,第一次用于 ...

  6. 【转】RestQL:现代化的 API 开发方式

    原文:http://tech.meituan.com/koa-restql.html RestQL:现代化的 API 开发方式 李鑫 ·2016-08-12 11:26 koa-restql 已经在  ...

  7. 【PHP伪静态】时获取不规则的URL参数

    $url = explode('/', '/article/category-5/status-2/page-3'); $params = array(); foreach ($url as $v) ...

  8. ACE_Time_Value

    头文件“Time_Value.h” 为了兼容各个平台的时间特性,ACE Reactor框架提供了ACE_Time_Value类.ACE_Time_Value的关键方法见下图3.2和表3.2.3.3: ...

  9. gSoap工具wsdl2h及soapcpp2指令汇总

    gSoap开发包的下载地址http://sourceforge.net/projects/gsoap2,在bin目录下提供了两个工具: 1:wsdl2h:The gSOAP wsdl2h tool i ...

  10. struts2中的<s:select>默认选项

    //... public class SelectAction extends ActionSupport{ private List<String> searchEngine; priv ...