子DIV块中设置margin-top时影响父DIV块位置（子div的paddingtop溢出父div）

于 2021-09-25 20:16:07 发布
阅读量297 收藏
点赞数
分类专栏： HTML 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzuzhaohp/article/details/120476785
版权

  这个问题的原因就是父子太亲，挨得太近，父亲和儿子div用了同一个top，所以就解除了父亲对于儿子的上边的限制；所以解决方法也很简单，直接让父亲主动给儿子一个padding-top，使他们顶部分离。常用的解决方法如下：

  • 让父级具有“包裹性”
  • 将父级over-flow设为hidden
  • 将父级display设为inline-block
  • 将父级float或absolute
  • 改变父级的结构
  • 给父元素设置padding （设置子div居中的时候特好用）
  • 给父元素设置透明borde
郑大那只鸟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div位置移动
09-03
随滚动条无延迟移动
Android CheckBox中设置padding无效解决办法
08-29
因此，设置padding值时，left始终为0，而top位置和Gravity有关。 解决这个问题的方法是，首先，需要了解CheckBox控件的特性，然后根据实际情况选择合适的解决方法。例如，可以使用本地图片资源来替换CheckBox的默认...
【html系列】div中会padding会溢出
IU
04-16 632
<div> <span class="is_span">这是span</span> </div> css .is_span{ padding:10px; } 此时会造成空间溢出 如下图 解决方法 //给span加上样式 display: inline-block; 给最外层添加overflow：hidden也行 不过 span的padding就失去了效果 ...
padding会改变div布局，解决方法
qq_29384639的博客
08-07 1013
问题描述： 初始布局如下图： 代码如下： <style> body{ margin: 0; } .left{ background: green; float: left; width: 300px; } ...
html的div位置
程风拂叶
01-03 2008
position：一般用absolute和relative，分别是绝对定位和相对定位，以原点的距离为单位；margin：有margin-top,margin-bottom,margin-left,margin-right 调节外边距；Padding：有Padding-top,Padding-bottom,Padding-left,Padding-right 调节内边距；float:往左侧向前边的非浮
子div的margin影响父div
热爱web前端开发
01-06 576
今天写div的时候，碰到了这个问题，当给子div加了margin以后，父div会莫名其妙的增加对于的margin。解决办法：给父div添加overflow:hidden。或者让子div浮动起来。都可以解决
Android仿微信或支付宝方块密码输入框
08-27
android:paddingTop="30dp" > android:id="@+id/txtTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="请输入...
Android编程实现擦除Bitmap中某一块的方法
01-04
本文实例讲述了Android编程实现擦除Bitmap中某一块的方法。分享给大家供大家参考，具体如下： 以前要截取Bitmap中的图片使用的一块块的拼接，虽然可以实现，但是效率很低。想了很久，无意中看到网上的对BITMAP图片的...
MenuAnimation-可以弹出子菜单的Menu.zip
09-24
相比于ExpandableButto的优点是子菜单的数量不限。项目地址：https://github.com/onivas/MenuAnimation 效果图：如何使用需要创建个<FrameLayout>的布局，注意必须是<FrameLayout>， 用于存在子菜单。&...
Android 自定义TextView去除paddingTop和paddingBottom
01-05
最近项目中需要用libgdx渲染一个Android的TextView， 但是绘制出来的TextView总是默认带有paddingTop和paddingBottom， 如下图所示： 网上有很多解决方案，例如在xml中设置如下属性： android:...
div位置
西瓜
05-07 717
https://www.cnblogs.com/whb17bcdq/p/6513766.html https://www.cnblogs.com/whb17bcdq/p/6513766.html
div的定位
m0_46170663的博客
02-18 974
一、DIV定位 1、绝对定位 2、相对定位 3、默认定位 二、绝对定位 1、position:absolute 2、toop、bottom、left、right 3、当多个div在同一位置时，显示那个层由zindex的值决定 三、相对定位 1、position:relative 2、相对于正常位置的top、bottom、left、right ...
div位置设置
weixin_30470857的博客
05-26 201
div居中显示 　　margin:0 auto div中的内容居中显示 　　text-algin:center div靠右显示 　　float:right 设置div元素的右外边距 　　margin-right:10px 转载于:https://www.cnblogs.com/xbq8080/p/6908401.html...
关于两个div，一个父div，一个子div，设置子div的margin会带动父div margin——解决办法
qq_39213643的博客
05-19 895
出现的问题 初衷是想让子div 距离父 div 上边距50px，但是和效果不一样 解决办法： 1、父div添加border 2、父div添加padding-top 3.父div添加 overflow：hidden ...
父DIV padding和子DIV margin
guojialing00的专栏
01-18 1116
在我们使用DIV创建布局的过程中，有可能遇到这种情况： 在父DIV中有一个子DIV，当我们想保持父DIV和子DIV之间保持一定距离的时候，是应该用父DIV的padding属性还是用子DIV的margin属性呢？ 答案是使用子DIV的margin属性，因为padding的应用场景主要是用于控制DIV内文字与DIV的距离，如果是涉及到布局的话，一般使用子DIV的margin属性。
div位置控制
u010287873的博客
09-27 7556
一个div便是一个上下的位置，不会左右展示除非专门控制 两个在一行展示： &lt;div &gt;     &lt;div id="div1" style="float:left"&gt;div1   content&lt;/div&gt;     &lt;div id="div2" style="float:left"&gt;div2   content&
html中如何写div中div的位置,css怎么调整div的位置？
热门推荐
weixin_32307599的博客
05-30 1万+
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。下面我们来看一下css调整div位置的方法。可以使用css中的position来对div进行定位来改变div的位置，position可能的值如下：absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "to...
引入padding后导致div布局混乱解决办法
Winifred_1997的博客
07-09 1744
增加padding的同时要注意总宽度够不够! 如果不够，可以缩小div的宽度 只需要把div的宽和高减去padding*2的值<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实战首页布局-margin设置</title> <style type="text/css"> #contain
页面<div>位置调整
静待花开
11-13 7858
调整页面&lt;div&gt;样式。 给&lt;div&gt;、&lt;select&gt;分别起名字：div2，s1 &lt;div&gt;代码： &lt;div class="div2" style="height: 100px; width: 150px;"&gt; &lt;label class=""&gt;+&
react获取div的宽高,如果div中与span折行了
最新发布
06-13
如果 div 中的内容折行了，获取 div 的宽高就需要考虑到内容的实际尺寸。可以使用 `getBoundingClientRect()` 方法获取元素的尺寸和位置信息。 具体的实现方式如下： ```javascript const div = document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值