内联元素的padding和margin
内联元素的padding和margin能设置上吗？
这是我前段时间面试某中厂被问到的一道面试题，一开始有点懵，但照自己的理解是这样回答的：内联元素不能通过改变宽高来改变元素大小，只能通过内部撑开，padding设置不上，margin-left和right可以设置上，margin-top和bottom设置不上。
面试结束后，我感觉自己对这一部分的理解还是存在问题，就一些论坛和官网查了相关问题，结论如下：
1.内联元素的pading-left和padding-right可以设置上，padding-top和padding-bottom视觉上设置上了，但是并没有影响布局
2.内联元素的margin在水平方向有效，垂直方向无效。
3.内联元素的width和height设置无效，高度能通过line-height改变
例子：
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>span {border: 2px solid red;font-size: 50px;padding: 20px 40px;}div {border: 2px solid black;width: 200px;background-color: blue;}style>
head>
<body><div>第一个块级元素div><span>这里是内联元素的文字span><div>第二个块级元素div>
body>
html>
截图：
可以看到，span标签的margin和padding在水平方向是有效的，paading在垂直方向上的视觉效果是有的，但不影响布局
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！