首页 > 其他 > 详细

内联元素,取消间隙和默认效果

时间:2017-08-25 10:27:57      阅读:244      评论:0      收藏:0      [点我收藏+]

内联元素特性

内联元素,也可以称为行内元素,布局中常用的标签如:a、span等等都是内联元素,它们在布局中的行为:

  • 不支持宽、高、margin上下、padding上下
  • 宽高由内容决定
  • 盒子并在一行
  • 代码换行,盒子之间会产生间距
  • 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式

 

经常遇到内联元素之间有间隙的问题,取消方法:

  方法1:编写html时候取消内联元素之间的换行

    为了保证代码的可读性和整洁,一般不推荐这样做。

  方法2:将内联元素的父级font-size设为0,在内联元素自身font-size设置成想要的。

    这是推荐的方法。

 

 

常用的含有语义的内联元素:

1、<em> 标签  斜体效果,表示语气中的强调词

2、<i> 标签 斜体效果,表示专业词汇

3、<b> 标签 加粗效果,表示文档中的关键字或者产品名

4、<strong> 标签 加粗效果,表示非常重要的内容

5、<a>标签 下划线效果,表示超链接

 

取消默认样式的方法:

/* 去掉a标签默认的下划线 */
a{
    text-decoration:none;
}
/* 去掉标签默认的文字倾斜 */
em,i{
    font-style:normal;
}
/* 去掉标签默认的文字加粗(按实际需求) */
b,strong{
    font-weight:normal;
}

 

内联元素,取消间隙和默认效果

原文:http://www.cnblogs.com/Lin-Yi/p/7426545.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!