[英]Why Does Using top or bottom Reduce the Element's Height?
I'm trying to position an icon responsively which is part of a plugin in WordPress.我正在尝试以响应方式定位一个图标,它是 WordPress 插件的一部分。
Using margin-top
and margin-bottom
works to position the icon further down the page, but top
and bottom
above 10px
seems to reduce the height of the icon when used in conjunction with position: relative;
使用
margin-top
和margin-bottom
可以将图标放置在页面bottom
,但是top
和bottom
高于10px
似乎与position: relative;
结合使用时降低了图标的高度position: relative;
@media(max-width: 768px) {
#a2a_share_save_widget-3 {
position: relative !important;
top: 20px !important;
left: 95%;
margin-left: -37px;
background-color: transparent! important;
color: transparent! important;
}
}
If I reduce top
to 10px
, the icon goes back to full height again.如果我将
top
减少到10px
,图标会再次恢复到全高。
Html:网址:
<div id="a2a_share_save_widget- 3" class="widget widget_a2a_share_save_widget">
<div class="a2a_kit a2a_kit_size_32 addtoany_list">
<a class="a2a_dd a2a_counter addtoany_share_save addtoany_share" href="https://www.addtoany.com/share"></a>.
</div>
</div>
What I want is to apply top
or bottom
to adjust position, not icon height.我想要的是应用
top
或bottom
来调整位置,而不是图标高度。
The issue is not with regards to the share widget's height being reduced.问题不在于共享小部件的高度被降低。 The issue is that
overflow: hidden
is given to its ancestor section
- the share widget is technically overflowing and parts of it are hidden.问题是
overflow: hidden
被赋予其祖先section
- 共享小部件在技术上是溢出的并且它的一部分被隐藏。
So to solve this, either remove/override the property overflow: hidden
from section
因此,要解决此问题,请删除/覆盖属性
overflow: hidden
from section
#content section {
overflow: visible;
}
or have the widget's container take X amount of minimum height或者让小部件的容器取 X 量的最小高度
div#main {
min-height: 80px;
}
I imagine you want to increase specificity as these examples are generic terms and you are using a wordpress theme我想您想提高特异性,因为这些示例是通用术语,并且您使用的是 wordpress 主题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.