行内元素和块状元素的区别

块状元素独占一行,默认情况下,宽度自动填满父元素宽度

行内元素默认不分行

行内元素宽高不能由css决定,而是由内容决定的

行内元素的margin和padding的垂直方向上不产生边距效果

可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换


行内元素和块级元素异同如下:

1.行内元素与块级元素直观上的区别,行内元素会在一条直线上排列,都是同一行的,水平方向排列;

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素;

  3.行内元素与块级元素的属性的不同,主要是盒模型属性上(行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效);

4.行内元素转换为块级元素,通过设置display:block

注:img\input\textarea等是特殊的行内元素,确切的说是inline-block元素。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,704评论 1 92
  • CSS盒模型 在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型。两种盒子模型都包括pa...
    _空空阅读 8,836评论 0 3
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,631评论 0 1
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 5,096评论 0 3
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,554评论 0 30

友情链接更多精彩内容