行内元素及其浮动

最新推荐文章于 2024-04-10 20:31:56 发布

转载最新推荐文章于 2024-04-10 20:31:56 发布 · 498 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/94pm/p/9636890.html

本文探讨了HTML中行内元素的特性，特别是当这些元素应用浮动属性时的行为变化。通过实例说明了行内元素浮动后的表现类似display:inline-block，不再受宽高限制，并能设置上下边距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们知道行内元素有很显的个性：不独占空间，设置宽和高无效，margin只有左右有效，padding四个方向都有效。

<html>
<head>
    <meta charset="UTF-8">
    <title>文件拖放</title>
    <style>
     #container{
         width: 500px;
         height: 50px;
         border: 1px solid gray;
     }
     .abc{
       border: 1px solid;
       padding-bottom: 100px;
       margin-left: 50px;
       margin-top:100px;
     }
    </style>
</head>
<body>
<div id="container">
   <span class="abc">12345</span>
</div>
</body>
</html>