[英]Padding on div changes height and width of parent container
I was wondering if there is an alternative method to achieving the results shown in the attached picture.我想知道是否有其他方法可以实现附图中显示的结果。 I used absolute positioning to get
.resume-icon-container
to sit flush with .resume-container
.我使用绝对定位让
.resume-icon-container
与.resume-container
齐平。
Every time I tried to add padding or height/width to .resume-icon-container
it would undesirably resize .resume-container
.每次我尝试向
.resume-icon-container
添加填充或高度/宽度时,它都会意外地调整.resume-container
大小。 I experimented with overflow: auto
and the z-index
but the only way I could achieve the results I want is with absolute positioning and adding margin-left
to position it then padding
and font-size
to make it flush with .resume-container
.我尝试了
overflow: auto
和z-index
但我能达到我想要的结果的唯一方法是使用绝对定位并将margin-left
添加到 position 然后padding
和font-size
以使其与.resume-container
齐平。 I was browsing similar questions as well and someone said to add box-sizing: border-box
but I already declared that setting in my CSS reset under the *
selector.我也在浏览类似的问题,有人说要添加
box-sizing: border-box
但我已经在我的 CSS 中声明了该设置在*
选择器下重置。
I would prefer to stay away from absolute positioning for responsive purposes, so I was wondering if there is another way to achieve what I want.为了响应的目的,我宁愿远离绝对定位,所以我想知道是否有另一种方法可以实现我想要的。
This is the desired result:这是期望的结果:
.resume-container { display: flex; flex-direction: row; background: rgba(144, 144, 144, 0.3); margin-top: 20px; border-radius: 20px; padding: 20px; width: 350px; margin-left: auto; margin-right: auto; align-items: center; justify-content: space-between; }.resume-container h1 { color: #fff; font-size: 25px; }.resume-icon-container { background: rgba(196, 196, 196, 0.3); padding: 20px; position: absolute; margin-left: 268px; border-radius: 20px; font-size: 10px; }.resume-icon-container i { color: #fff; }
<div class="resume-container"> <h1>Download Resume</h1> <div class="resume-icon-container"> <i class="fa-solid fa-file fa-3x"></i> </div> </div>
Remove the absolute
positioning and padding
and use margin-left
on your h1
.删除
absolute
定位和padding
并在h1
上使用margin-left
。
.resume-container { display: flex; flex-direction: row; background: rgba(144, 144, 144, 0.3); margin-top: 20px; border-radius: 20px; width: 350px; margin-left: auto; margin-right: auto; align-items: center; justify-content: space-between; }.resume-container h1 { color: #fff; font-size: 25px; margin-left: 1em; }.resume-icon-container { background: rgba(196, 196, 196, 0.3); padding: 20px; border-radius: 20px; }.resume-icon-container i { color: #fff; width: 100%; }
<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script> <div class="resume-container"> <h1>Download Resume</h1> <div class="resume-icon-container"> <i class="fa-solid fa-file fa-3x"></i> </div> </div>
The way you are tuning those margins and paddings, you will always be looking at something different depending on the size of the screen.你调整这些边距和填充的方式,你总是会看到不同的东西,这取决于屏幕的大小。 You need to use relative positioning so that the items appear on the screen the same regardless of the number of pixels.
您需要使用相对定位,以便无论像素数如何,项目在屏幕上的显示都是一样的。 It can also get confusing to mix margin with padding.
混合边距和填充也会让人感到困惑。 Margin will push the element from its nearest element while padding will push elements inside that element away from the left,top,etc.
边距会将元素推离其最近的元素,而填充会将元素内的元素推离左侧、顶部等。
I like to start by creating a container for each element so that we can design each new div element like its own page.我喜欢从为每个元素创建一个容器开始,这样我们就可以像设计自己的页面一样设计每个新的 div 元素。
Consider the following code:考虑以下代码:
<div id="View">
<div id="OptionBlock">
<div id="Options1">
<div id="AddDocument" class="options">Add New Document<div id="DocumentIcon"></div></div>
<div id="AddTemplate" class="options">Add New Template<div id="TemplateIcon"></div></div>
</div>
<div id="Options2">
<div id="ChangeSignature" class="options">Change Your Signature<div id="SignatureIcon"></div></div>
<a href="/UserDashboard/Settings/"><div id="Settings" class="options">Settings and Subscription<div id="SettingsIcon"></div></div></a>
</div>
</div>
</div>
#View {
width: 100%;
height: 60%;
}
#OptionBlock {
width: 100%;
}
#Options1 {
width: 100%;
float: left;
}
#Options2 {
width: 100%;
float: left;
}
#AddDocument {
float: left;
padding: 5px;
width: 25%;
height: 38%;
margin-left: 24%;
margin-right: 2%;
margin-top: 2%;
text-align: center;
border: 2px solid black;
border-radius: 25px;
background-color: #ffffff;
font-size: x-large;
font-weight: bold;
}
#AddTemplate {
float: left;
padding: 5px;
width: 25%;
height: 38%;
margin-top: 2%;
margin-right: 24%;
text-align: center;
border: 2px solid black;
border-radius: 25px;
background-color: #ffffff;
font-size: x-large;
font-weight: bold;
}
Notice how I treat the outer boxes as large containers, defining all the total width and height we need, then leaving it to the css for particular elements showing content to position themselves within that container on the screen.请注意我如何将外框视为大容器,定义我们需要的所有总宽度和高度,然后将其留给 css 以在屏幕上的该容器内显示内容为 position 的特定元素。 The width and left and right margins of elements #AddDocument and #AddTemplate add up to 100% width so that the entire box it is placed in is accounted for.
元素#AddDocument 和#AddTemplate 的宽度和左右边距加起来为 100% 宽度,因此放置它的整个框都被考虑在内。
Preview CSS Placements (this renders dead center at the top of the webpage)预览 CSS 展示位置(这在网页顶部呈现死点)
It's just a matter of playing with the css.这只是玩css的问题。
For this kind of "trial and error" problem you should use CodePen or similar.对于这种“试错”问题,您应该使用 CodePen 或类似工具。 It'll make your life much easier.
它会让你的生活更轻松。
.resume-container { display: flex; flex-direction: row; background: rgba(144, 144, 144, 0.3); margin-top: 20px; border-radius: 20px; /* padding: 20px;*/ width: 350px; margin-left: auto; margin-right: auto; align-items: center; justify-content: space-between; }.resume-container h1 { color: #fff; font-size: 25px; padding: 20px; margin: 0; }.resume-icon-container { background: rgba(196, 196, 196, 0.3); padding: 20px; float: right; /*margin-left: 268px;*/ border-radius: 20px; /*font-size: 10px;*/ height: 100%; }.resume-icon-container i { color: #fff; }.bi { font-size: 2rem; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet" /> <div class="resume-container"> <h1>Download Resume</h1> <div class="resume-icon-container"> <i class="fa-solid fa-file fa-3x"></i> <i class="bi bi-file-earmark-text"></i> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.