css 块级元素 div 包含 div margin-top 失效问题

最新推荐文章于 2024-09-05 15:37:22 发布

原创最新推荐文章于 2024-09-05 15:37:22 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

css 同时被 2 个专栏收录

2 篇文章

订阅专栏

uni-app

2 篇文章

订阅专栏

本文探讨了在CSS布局中，当块级元素包含块级子元素时，内部子元素的margin-top可能导致的问题。文章通过示例展示了未修改前的问题情况，即外层元素受到内层元素margin-top的影响。为了解决这个问题，作者提出了将内部块级子元素的display属性设置为inline-block的方法，并给出了修改后的效果图，显示了问题成功解决的状态。

<view class="top">
			<view class="search top20">
				<image mode="widthFix" class="icon" src="/static/search.png"></image>
				<input class="input" type="text" placeholder="请输入搜索关键词" v-model="keywords"></input>
			</view>
		</view>```

.top{
width: 100%;
background: linear-gradient(0deg, #EC8889, #E30609);
height: 340rpx;
}
.search{
width: calc(100vw - 70rpx);
background-color: #fff;
display: inline-block;
margin-top: 10px;
}```

当块级元素包含块级元素时,内部块级子元素margin-top会失效,会导致外层块级元素生效margin-top熟悉,解决方法就是把内部块级子元素设置为display:inline-block 就可以了

未修改前问题图
在这里插入图片描述