替换元素、非替换元素、行内替换元素、行内非替换元素

最新推荐文章于 2023-01-06 11:24:54 发布

西瓜西瓜__

最新推荐文章于 2023-01-06 11:24:54 发布

阅读量148

点赞数

文章标签： html css

原文链接：https://blog.csdn.net/qq_35765126/article/details/89047755

版权

阿虽然是超级简单的知识点但是我老是忘记
还是记录一下吧
行内元素、块级元素都不陌生了，
但是很奇怪为什么有的行内元素可以撑开父元素，有的不可以呢，行内元素设置padding、margin到底会不会生效呢？

替换元素

替换元素就是浏览器根据标签的元素、属性来决定如何显示，比如img、video、input、textarea
非替换元素就是div、span、p、h1-h6、这些
上demo和效果图

   <style>
        .line{
            width: 100%;
            border: 1px solid red;
            height: 2px;
            margin: 100px 0px;
        }
        input,img{
            border: 1px solid red;
            padding: 20px;
            background: blue;
            margin: 10px;
        }
        span{
            border: 1px solid red;
            padding: 20px;
            margin: 10px;
            background: blue;
        }
        div{
            width: 300px;
            border: 1px solid green;
        }
    </style>

<body>
    <p>替换元素：img、input、textarea、select、video</p>
    <p>非替换元素：div、span、p</p>

    <h3>行内替换元素设置padding、margin、background</h3>
    <h5>设置padding、margin可以撑开父元素</h5>
    <div>
        <input type="email"/>
        <!-- <img src="./1.jpg" alt="" srcset=""> -->
    </div>
    <p class="line"></p>
    <h3>行内非替换元素设置padding、margin、background</h3>
    <h5>span的padding，左右外边距也生效，但是不会撑开父元素</h5>
    <div>
        <span>span</span>
    </div>
</body>

行内替换元素input效果图
在这里插入图片描述 img效果图，（看我帅气的小鱼仙倌哈哈哈哈哈）

下面是行内非替换元素span

在这里插入图片描述
效果图来看四个内边距已生效
margin只有左右生效了，上下没有生效, 虽然设置了值但是
不会撑开父元素

在这里插入图片描述

西瓜西瓜__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
替换元素、非替换元素、行内替换元素、行内非替换元素

阿虽然是超级简单的知识点但是我老是忘记还是记录一下吧行内元素、块级元素都不陌生了，但是很奇怪为什么有的行内元素可以撑开父元素，有的不可以呢，行内元素设置padding、margin到底会不会生效呢？替换元素替换元素就是浏览器根据标签的元素、属性来决定如何显示，比如img、video、input、textarea 非替换元素就是div、span、p、h1-h6、这些上demo和效果图 <style> .line{ width: 1.
复制链接

扫一扫