块级元素与行内元素
2018-05-13 本文已影响7人
好奇男孩
块级元素与行内元素
常用的块级元素与行内元素有哪些？
块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, h1-6, hr,menu, table,dd dt tr td th,pre
行内元素：span, strong, em, br, img , input, label, select, textarea,button,code ,script
块级元素与行内元素的区别
区别1：块级元素独占一行，行内元素的长度就是内容的长度。
区别2：块级元素可以设置宽高，行内元素不能设定宽和高。
区别3：块级元素可以包含行内元素，但行内元素不能包含块级元素
区别4：行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的
行内元素的padding-left、padding-right、margin-left、margin-bottom属性设置是有效的
注意：
行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的。并不会对他周围的元素产生任何影响。
范例：
<style>
div{
border:1px solid red;
}
span{
border:1px solid #0f0;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
margin-top: 20px;
margin-bottom:20px;
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<div>
<span>hello </span><span>world</span>
</div>
</body>
2.png
