为了账号安全,请及时绑定邮箱和手机立即绑定

关于把内联元素设置成内联块状元素的问题

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>内联块状元素</title>

<style type="text/css">

a{display:block;

width:20px;/*在默认情况下宽度不起作用*/

height:20px;/*在默认情况下高度不起作用*/

background:pink;/*设置背景颜色为粉色*/

text-align:center; /*设置文本居中显示*/

}

span{

    display:block;

    

    

    

}

    

</style>

</head>

<body>

<a>1</a>

<a>2</a>

<a>3</a>

<a>4</a>

<p>1234566<span>7</span>8</p>



</body>

</html>


为什么8也跑下来了,和7在一行的

正在回答

4 回答

display:block;是块元素

display:inline-block;才是内联块元素

0 回复 有任何疑惑可以回复我~
#1

哇哈哈lk 提问者

非常感谢!
2016-07-20 回复 有任何疑惑可以回复我~

如下是块元素的特点,参照第一条:

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。


0 回复 有任何疑惑可以回复我~

display:block;是块元素,应该用inline-block。

0 回复 有任何疑惑可以回复我~

span变成了块状元素,自己一行。所以8也只能自己另起一行

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

关于把内联元素设置成内联块状元素的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信