inline-block间隙问题内联元素与块级元素

内联元素

a-描点
big-大字体
br-换行
em-强调
i-斜体
img-图片
input-输入框
lable-表格标签
select-项目选择
small-小字体问吧
span-定义文本区块
strike-中划线
strong-粗体
sub-下标
sup-上标
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
font – 字体设定(不推荐)
s – 中划线(不推荐)
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 定义变量

1.同排可以继续跟同类的标签
2.内容撑开宽度
3.不支持宽高
4.不支持上下的margin
5.代码换行被解析
排列默认间隔5px; 解决：浮动或diplay:flex;
然而img input标签支持宽高并且支持所有margin的特殊内联元素

块级元素：

address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是css layout的主要标签*
dl – 定义列表*
fieldset – form控制组
form – 交互表单
h1 – 大标题*
h2 – 副标题*
h3 – 3级标题*
h4 – 4级标题*
h5 – 5级标题*
h6 – 6级标题*
hr – 水平分隔线*
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容）
noscript – ）可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 排序表单*
p – 段落*
pre – 格式化文本
table – 表格*
ul – 非排序列表*

块元素特征
1.在没有设置宽度的时候，默认撑满一行。
2.默认块元素独占一行
3.支持所有css命令
相互之间可以转化
使用display:inline-block会有个间距5px;
关于间隙问题：
1.可以给父级加font-size:0;

<body style="font-size: 0;">
    <div>div</div>
    <p>p</p>
    <span>span</span>
    <a href="">a</a>
</body>

2.移除标签之间空格（代码排版很丑，修改麻烦）

<body>
    <div>div</div><p>p</p><span>span</span><a href="">a</a>
</body>

3.用html注释去注释空白

<body>
    <div>div</div><!--
    --><p>p</p><!--
    --><span>span</span><!--
    --><a href="">a</a>
</body>

4.使用margin:负值

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        div,p{
            width:100px;
            height:100px;
            background:palevioletred;
            display: inline-block;
            margin:-5px;
        }
        span,a{
            background: palegreen;
            color: red;
        }
        a{
            margin:-5px;
        }
    </style>
    </head>
    <body>
        <div>div</div>
        <p>p</p>
        <span>span</span>
        <a href="">a</a>
    </body>
</html>

5.给最后一个标签加闭合标签

<body>
    <div>
        <a href="">a标签
        <a href="">a标签
        <a href="">a标签</a>
    </div>
</body>

6.用letter-spacing;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin:0;padding:0;}
            div{
                letter-spacing: -5px;
            }
            a{
                background: palegreen;
                color: red;
                letter-spacing: 0px;
            }

        </style>
    </head>
    <body>
        <div>
            <a href="">a标签</a>
            <a href="">a标签</a>
            <a href="">a标签</a>
        </div>
    </body>
</html>

7.用word-spacing

inline-block间隙问题内联元素与块级元素

猜你喜欢