详解css中inline-block的最小宽度值

前言

最近晚上会抽出一点时间看《css世界》这本书，这本书讲的很有趣，让我知道css并非几个属性样式这么简单。昨天看到width在行内块元素中，如果设置其宽度为0，该元素标签里面的内容存在着一个最小的宽度，最小的宽度根据中文字符和英文字符又有所区别，中文字符是以每个汉字来分割，英文字符是以英文单词来分割。

文章的开始

书中举了一个凹凸的例子，但是并没有详细的讲解，下面我对这段代码详细解释一下。

代码操作

 .ao ,.tu{
     display: inline-block;
     width: 0;
     font-size: 14px;
     line-height: 18px;
     margin: 35px;
     color: skyblue;
 }
 .ao:before,
 .tu:before{
     
     outline: 2px solid #cd0000;
     
     font-family: Consolas, Monaco, monospace;
 }
 .ao:before{
     content: "love你love";
 }
 .tu{
     
     direction: rtl;
 }
 .tu:before{
     content: "我love你"
 }
    


    
 我爱mother
 不爱你
 我爱你
    

结果演示

代码解读

两个span标签来展示凹凸的效果。span标签是行内元素，如果对三种样式不是很熟悉我在文章的后面都有说明。

1.首先通过display转换成行内块元素。然后宽度设置为0让span元素能够拥有最小宽度值。

2.对两个伪元素使用公共的伪元素before，伪元素不同的内容会不同的换行外边框样式为红色并且规定字体样式。
为什么要用伪元素，不用伪元素直接进行设置不行吗？我带着这个疑问又试了一次，发现不用伪元素的时候文字是凹凸显示，但是边框不是，而且文字之间还会叠加和重合。这个原因还没有想明白，大家可以看看讨论一下。

direction: rtl;是为了让文本方向从右到左，凸出来的部分正好对准凹进去的口子。

3.后面的我爱mother，不爱你会按照行内块元素的最下宽度值在before元素内容之后显示。

标签分类

块级元素

   定义地址
   定义表格标题