行内元素的特点有:

1、与其他元素在同一行

2、宽度(width)、高度(height)、内边距的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;

代码如下:

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

   <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可以设置  ,只不过不影响布局,相当于失效;

img元素:

  内联块状元素,也属于行内元素,设置margin-top有效;

  (行内元素,会计元素都是盒模型,都可以设置margin,不过行内元素的上下margin在布局中体现不出来,不影响布局,并不是行内元素不可以设置上下margin)

最新文章

  1. java.lang.NoSuchMethodError: org.apache.tomcat.util.res.StringManager.getManager(Ljava/lang/Class;)Lorg/apache/tomcat/util/res/StringManager
  2. CSS学习总结(二)
  3. 将公网IP自动发到Twitter上
  4. BQ24296充电管理芯片使用过程中的注意事项
  5. C++11 智能指针unique_ptr使用 -- 以排序二叉树为例
  6. 将自定义的 service provider 绑定到 IOC 容器
  7. laravel判断HTTP请求是否ajax
  8. iOS常用插件
  9. LTE参考资料
  10. (转)Libevent(5)— 连接监听器
  11. iOS面试题6.30总结
  12. 匿名类型和Object转换
  13. SSAS系列——【06】多维数据(创建Cube)
  14. asp之servervariables全部显示
  15. ibatis参数传递小技巧 - 疯狂的菠菜 - ITeye技术网站
  16. 7.21.04 for循环
  17. 团队作业8——第二次项目冲刺(Beta阶段)--5.26 sixth day
  18. 接口测试——Java + TestNG 国家气象局接口(json解析)实例
  19. Mongodb字段自增长
  20. 利用jsoncpp将json字符串转换为Vector

热门文章

  1. MonoBehaviour单例的另外一种省事的写法
  2. MySQL判断数据是否为空
  3. 计数器IP核
  4. ssh连不上的问题
  5. 好文章推荐 数据库mysql
  6. Java 字符串、数值与16进制相互转化
  7. Linux上安装nodejs
  8. Java通过反射读取泛型
  9. C#中使用IndexOf()判断字符串在字符串数组中第一次出现的索引位置
  10. C语言程序设计100例之(27):回旋方阵