请问<span><img>这两个行内元素，也可以设置margin和padding吗？
来源：2-6 html5页面布局（表现层_footer）
嘶阳
2019-11-10 14:54:00
请问<span><img>这两个行内元素，也可以设置margin和padding吗？有什么要注意的地方？
2回答
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内、块状、行内块状元素特性</title>
<style type="text/css">
div{
width: 400px;
height: 400px;
background: pink;
margin: 20px auto;
border: 1px solid black;
}
/* span为行内元素 */
.span1{
background: green;/* 有效 */
width: 100px;/* 无效 */
height: 100px;/* 无效 */
border: 5px solid black;/* 有效 */
margin: 50px 50px;/* 上下无效，左右有效 */
padding: 10px 50px;/* 上下左右都有效 */
}
.span2{
background: green;/* 有效 */
}
/* img为行内替换元素（即行内块状元素） */
.img1{
background: grey;/* 有效 */
width: 100px;/* 有效 */
height: 100px;/* 有效 */
border: 5px solid black;/* 有效 */
margin: 50px 50px;/* 上下都有效 */
padding: 10px 50px;/* 上下左右都有效 */
}
.img2{
background: grey;/* 有效 */
width: 20px;/* 有效 */
height: 20px;/* 有效 */
}
</style>
</head>
<body>
<div>
<span class="span1">1</span>
<span class="span2">2</span>
<img class="img1" src="" />
<img class="img2" src="" />
</div>
<h2>
总结：</h2>
<pre>
一、行内元素特征：
(1)宽高无效
(2)margin左右有效，上下无效；padding上下左右都有效
(3)不会自动换行
二、块状元素特征：
(1)具有宽高
(2)margin和padding上下左右都有效
(3)独占一行，即自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
三、行内块状元素特征：
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
</pre>
</body>
</html>
0 -
好帮手慕夭夭
2019-11-10
同学你好，可以设置padding和margin，需要注意如下：
1.行内元素只能水平方向的间距，即span设置了margin-top，margin-bottom，padding-top ,padding-bottom设置了不会生效。
2.图片比较特殊，它虽然是行内元素。它是它表现形式和行内块元素差不多。即它可以设置padding和margin，水平和垂直方向上都会生效。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题