front-end-interview
front-end-interview copied to clipboard
Published
20 hours ago •
Liqiuyue9597
Liqiuyue9597
inline、inline-block、block的区别
block：独占一行，可以设置宽高
inline：不会独占一行，不能设置宽高
inline-block：不会独占一行，能设置宽高。比如<img>和<input>.
通常会引申到：margin和padding能对行内元素设置吗？
行内元素：
- 行内元素不会自动换行，设置宽高无效
- 行内元素设置margin和padding左右有效，上下无效
关于行内元素的margin，padding，左右设置是有效的，但是padding上下方向只是从显示效果上是增加的，但是实际上又是不会挤开其他元素的。
相关参考：https://blog.csdn.net/qq_37852483/article/details/88762561
下面是我的测试
<!DOCTYPE html>
<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>行内元素的padding，margin设置的有用吗</title>
<style>
* {
margin: 0;
padding: 0;
}
.span1 {
margin: 20px;
}
.span2 {
padding: 20px;
}
</style>
</head>
<body>
<p>看下会不会把我挤走 <span class="span1">我是span啊</span>
理论上达拉斯的
</p>
<p>看下会不会把我挤走 <span class="span2">我是span啊</span>
理论上达拉斯的
</p>
</body>
</html>
