行内元素和块级元素

[Twlig]

块级元素和行内元素的定义

块级元素

• 总是独占一行。

  满足：margin-left+padding-left+border-left+width+border-right+padding-right+margin-right = 父元素width

• width，height，padding，margin都可以设置

• 宽度缺省是它的容器的100%

• 可以容纳内联元素和其他块元素

行内元素

• 多个行内元素可以在一行
• 元素大小由文本决定，设置width，height，margin上下，padding上下无效
• 只能容纳文本或者其他内联元素

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

1. 行内元素一行可以有多个。块级元素各占据一行。
2. 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
3. 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

display属性

display属性用于设置元素的类型，主要就是block，inline，inline-block三种。前面提到的块级元素和行内元素分别就是block和inline。

inline-block

该值是新增的值，是行内块元素。如input、img元素。

• 有 block 元素可以设置宽高的特性
• 有 inline 元素默认不换行的特性
• 可以设置 vertical-align（这个垂直对齐属性只对设置了inline-block的元素有效） 属性

inline-block存在的问题：存在间隙

    <!-- 写法一 -->
	<div>
        <a href="">我是a1</a>
        <a href="">我是a2</a>
    </div>
    <!-- 写法二 -->
    <div>
        <a href="">我是a1</a><a href="">我是a2</a>
    </div>

写法一中a1和a2之间会产生间隙。这是由于HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block或inline会产生元素间的空隙。而写法二没有换行就不会有空隙，但是不符合书写规范。

解决方法

• 使用负值的margin各个浏览器的负值也不相同，才能完美贴合
• 在父元素的css中设置word-spacing负值，不同浏览器值也不同

常见的块级元素和行内元素

块级元素： div，form，h1，ul，ol，li，p

行内元素：img，span，input，select，a，em，b，button