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

在css布局中,会经常使用的块级元素和行内元素,而且会经常混淆这二者的使用,下面我们就来对这二者做出明确的区别,便于大家区分这二者。

1、位置

块级元素会独占一行,

行内元素不会独占一行,相邻的行内元素会排列在一行,

2.宽高

块级元素可以设置宽高,默认情况下宽度会自动填充父类的宽度,

行内元素不可以设置宽高,宽度随着内容的宽度的变化而变化。

3.内外边距

块级元素可以设置margin,padding

行内元素有水平方向的margin-left,margin-right,padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

4.display

块级:display:block

行内:display:inline;

可以通过修改display属性来切换块级元素和行内元素

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,801评论 1 92
  • 块级元素(block element) div - 定义文档中的分区或节dl - 定义列表form - 交互表单...
    _随梦阅读 462评论 0 0
  • HTML中的元素可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素:显...
    adingmoon阅读 517评论 0 0
  • 2015.1.5日,我去了北京一家互联网创业公司面试,我感受到了那里年轻人在一起拼搏的氛围,招聘栏上,说是希望要有...
    Miss____Du阅读 18,549评论 13 55
  • 文/正霖 思思念念,夢夢醒醒,幽幽怨怨兮兮。 寂寞嫦娥奔月,殤愛無情。 幾度桃花盛開,醉缤纷、自在凋零。 燕歸來,...
    正霖居士阅读 378评论 14 3