inline 元素的特性

http://www.maxdesign.com.au/articles/inline/

http://www.w3.org/TR/CSS2/visuren.html#inline-boxes

http://www.w3.org/TR/CSS2/visudet.html#q4

 inline不认高宽，不认上下的margin，不认overflow，但可以识别padding和左右方向的margin，也有line-height

inline属性的a标签，span标签支持margin-left与margin-right，margin-top无作用，而img标签margin四个方向都支持()。

本文章介绍了inline元素的padding,margin,width,height对元素本身的影响

要点：
块状元素前后元素会换行
行内元素前后元素不会换行

第一：行内元素与宽度
宽度不起作用
span {
    width:200px;
}没有变化

第二：行内元素与高度
高度不起作用  但是高度可有line-height来确定
span{
    height:200px;
}
没用变化

第三：行内元素与padding,margin
span{
    padding:200px;
}
影响左右，不影响上下

如何实现
<ul>
<li>第一</li>
<li>第一</li>
<li>第一</li>
</ul>
中的li在同一行显示并有上下边距呢,
如果用display:inline，可行让其在一行内显示，但上下padding不起作用。
所以这种情况下用float:left;使其在一行内显示，并且其还是block元素，可以用
padding使与上下padding起作用，差生一定距离

The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘width’ property does not apply.

The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property.

While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content.

 

Margins operate in the same way as padding on inline elements. In the example below, 50px of margin has been applied to all sides of the <a> element. While the left and right edges are effected, the content above and below are not.

li 的padding和margin都正常生效  li是块级元素

 

Examples of block level elements

Element	Description
<address>	information on author
<blockquote>	long quotation
<button>	push button
<caption>	table caption
<dd>	definition description
<del>	deleted text
<div>	generic language/style container
<dl>	definition list
<dt>	definition term
<fieldset>	form control group
<form>	interactive form
<h1>	heading
<h2>	heading
<h3>	heading
<h4>	heading
<h5>	heading
<h6>	heading
<hr>	horizontal rule
<iframe>	inline subwindow
<ins>	inserted text
<legend>	fieldset legend
<li>	list item
<map>	client-side image map
<noframes>	alternate content container for non frame-based rendering
<noscript>	alternate content container for non script-based rendering
<object>	generic embedded object
<ol>	ordered list
<p>	paragraph
<pre>	preformatted text
<table>	table
<tbody>	table body
<td>	table data cell
<tfoot>	table footer
<th>	table header cell
<thead>	table header
<tr>	table row
<ul>	unordered list

转载于:https://www.cnblogs.com/mabelstyle/p/3182124.html