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

最新推荐文章于 2023-07-31 15:56:49 发布

mrs_qian

最新推荐文章于 2023-07-31 15:56:49 发布

阅读量347

点赞数

分类专栏： css uni-app 文章标签： css 前端

本文链接：https://blog.csdn.net/mrs_qian/article/details/125908883

版权

css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

uni-app

2 篇文章 0 订阅

订阅专栏

<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 就可以了

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