text-indent的用法

时间 2019-12-01

标签 text indent 用法栏目 HTML 繁體版

原文原文链接

1、text-indent应用于块级元素css

　　<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            font-size:12px;
            color:#333;
        }
        p{text-indent:2em;background-color:#f00;color:#fff;}
    </style>
</head>
<body>
    <p>携程旅行网携程旅行网携程旅行网携程旅行网携程旅行网携程旅行网携程旅行网携程旅行网携程旅行网携程旅行网携程旅行网携程旅行网携程旅行网携程旅行网</p>

咱们也能够经过负的text-indent来制做一些效果：spa

<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            font-size:12px;
            color:#333;
        }
        p{
            text-indent:-6em;padding-left:6em;
        }
    </style>
</head>
<body>
    <p>携程旅行网：中国领先的在线旅行服务公司，创立于1999年，总部设在中国上海。携程旅行网向超过五千余万注册会员提供包括酒店预订、机票预订、度假预订、商旅管理、高铁代购以及旅游资讯在内的全方位旅行服务。目前，携程旅行网拥有国内外五千余家会员酒店可供预订，是中国领先的酒店预订服务中心，每个月酒店预订量达到五十余万间夜。在机票预订方面，携程旅行网是中国领先的机票预订服务平台，覆盖国内外全部航线，并在四十五个大中城市提供免费送机票服务，每个月出票量四十余万张。</p>

2、text-indent应用于行内元素code

　　没有效果；blog

3、text-indent应用于替换元素ip

　　这里以应用到image与input元素为例进行说明，input

<img src="pic_ad1.png" alt="" style="text-indent:2em;" />
    <br />
    <input type="text" value="ctrip" style="text-indent:2em" />
    <br />
    <input type="text" value="携程旅行网" style="text-indent:2em" />

img缩进了2个字符，input里面的value值夜缩进了2个字符。class

6、总结im

看到这么多的不一样点，您是否是感受到很乱？若是你以为不乱，那好，你是一牛人。无论你乱不乱，反正我是乱了。总结

因此，我给本身总结了一下：margin

1.text-indent只用于div，p这样的元素上，像image、input、inline-block、inline元素绝对不用。

2.text-indent的值若是子元素也要用到父元素的值，用px单位，而毫不用em。

最后，仍是要说一下，本人水平有限，若有什么不当之处还请多指正。

1. css3 calc()的用法 css3 calc()的用法
2. mysqli_query 的用法和my_sqliconnect的用法
3. display:table的用法
4. stylus的用法
5. powersploit的用法
6. iScroll.js的用法
7. @的用法
8. highcharts的用法
9. Array.sort的用法
10. %s的用法
更多相关文章...
• Redis哨兵（Sentinel）模式的配置方法及其在Java中的用法 - Redis教程
• Spring中Bean的作用域 - Spring教程
• C# 中 foreach 遍历的用法
• 适用于PHP初学者的学习线路和建议