html中的对a标签设置margin和padding的top、bottom不起效果解决办法

最新推荐文章于 2021-06-03 23:25:42 发布

原创最新推荐文章于 2021-06-03 23:25:42 发布 · 4.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html问题

html问题专栏收录该内容

1 篇文章

订阅专栏

本文探讨了HTML中a标签设置margin和padding的top、bottom属性时出现的显示问题，解析了问题根源在于a标签默认为行内元素，而非块级元素。提供了解决方案，即通过CSS的display属性将a标签转换为块级元素，从而让margin和padding的上下属性生效。

问题：html中的对a标签设置margin和padding的top、bottom不起效果
问题原因：a标签是块级元素，所以magin和padding的上下属性不起作用
解决办法：为a标签添加display：block；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

webxiao1

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

小程序底部最后一个元素设置margin-bottom部分android机型不生效IOS可以

闫瑞锋的博客

08-10

724

解决办法统一设置改成padding-bottom padding-bottom:

HTML a标签如何设置margin属性

ws04170099的专栏

01-14

1220

很多同学发现对DIV有效的许多CSS属性对<a>或<p>标签都无效，好比说 <div style="margin-top:5px;"></div> 就是有效的距离但是 <a style="margin-top:5px;"></a> 这个距离便无效，其实原因很简单，因为a标签不是盒子，而ma

3 条评论您还未登录，请先登录后发表或查看评论

3 条评论

拼命の努力！ 2022.09.28
瞎写

拼命の努力！ 2022.09.28
这是因为，a标签是行内元素。。。。

norang 2021.03.17
这是因为，a标签是行内元素。。。。

Facebook AI指出：CNN的padding机制，存在一大缺陷

weixin_40920183的博客

11-10

704

作者| 青暮Facebook AI近期提出一项新研究，表明CNN中常用的padding机制存在重大缺陷，会导致特征图中出现伪影，从而影响CNN的应用。作者把这种伪影称为空...

Android疑难杂症动态改变Background后Padding无效的问题

宝剑锋从磨砺出，梅花香自苦寒来！

12-17

1095

http://blog.sina.com.cn/s/blog_46726d2401012m5u.html 前言在Layout中指定好background和padding以后，程序里面动态修改background之后padding就失效了，貌似是一个BUG，这里找到了一篇英文文章，简单翻译分享一下。　　　　农民伯伯： http://over140.cnblogs.c

大小盒子 padding-bottom 失效问题

josiecici的博客

12-18

3411

白色为大盒子蓝色为小盒子但是小盒子内的东西很多超过了大盒子的高度所以就有滚动条但是小盒子高度为100% 则继承大盒子的高度 70vh 所以padding的bottom没留出来padding出来直接顶了bottom 因为这个时候小盒子确实是在大盒子padding内只是内容出去了。小盒子不写高度后小盒子高度就是内容高度并且bottom的padding 也成功出现 ...

火狐浏览器中pandding-bottom无效的问题

Chatopera

01-15

1466

火狐浏览器中pandding-bottom无效的问题问题描述导致原因解决方案问题描述最近在项目开发中遇到一个奇怪的问题，当我使用 padding-bottom：100px 在页面底部，高度为100px。在Chrome上显示正常：但是在火狐浏览器中，却不起作用：造成的现象就是有一部分内容展示不出来。导致原因一番查询之后，是因为火狐和ie浏览器会出现‘吞吃’的情况，当节点的内容超过了自身高度，此时还给节点设置了overflow:auto；的话，overflow属性会将超出的部分剪裁到paddin

精选资源

CSS中margin和padding的区别浅析

01-19

下面讲解 padding和margin常用的用法一、padding 1、语法结构（1）padding-left:10px; 左内边距（2）padding-right:10px; 右内边距（3）padding-top:10px; 上内边距（4）padding-bottom:10px; 下内边距（5）...

css中padding和margin的异同点介绍

12-07

右内边距（3）padding-top:10px; 上内边距（4）padding-bottom:10px; 下内边距（5）padding：10px; 四边统一内边距（6）padding:10px 20px; 上下、左右内边距（7）padding:10px 20px 30px; 上、左右、下内边距...

Class与ID区别 margin和padding区别 CSS学习笔记

10-30

margin属性是用来设置元素的外边距的，它包括margin-top、margin-right、margin-bottom和margin-left四个方向的边距。margin属性可以将元素与其他元素隔开，或者将元素与页面边缘隔开。 padding属性是用来设置元素...

clear:both后margin-top不起作用其他左右下都起作用

09-25

第二个`div`使用`clear:both`来确保它在垂直方向上不与第一个浮动`div`重叠，同时设置了`margin-top:20px`、`margin-bottom:20px`和`margin-right:20px`。在这种情况下，`clear:both`的`margin-top`不起作用的原因...

09_盒子模型-padding和margin对比.html

最新发布

10-09

在实际应用中，合理使用margin和padding可以解决很多布局上的问题，比如消除浮动元素下方的间隙，或者使一个元素在视觉上与其相邻元素之间保持一定距离。因此，掌握它们的正确使用方法对于网页设计师来说至关重要。 ...

html bottom没有效果,HTML CSS Padding-bottom 0在firefox上不起作用

weixin_39716971的博客

06-03

461

您已经为浏览器提供了不完整的布局问题。您有一个三乘三的网格，其列或行都没有固定的大小。所以问题是你最终得到的第一行比你预期的要高，因为浏览器试图在第一列的单元格中分配第二列中的rowspan引起的“备用”高度。这没有标准化的算法;浏览器做不同的事情，通常包括不愉快的事情，比如查看每个单元格中标记的原始字节数。您不想依赖此行为。它还会减慢页面渲染速度，并且当内容非常少或大量时，可能会产生非常奇怪的页...

padding-bottom在IE6下失效的原因

weixin_30721077的博客

01-14

238

<li><a><a/><li/>CSS:a{ float:right; }li{ padding-bottom; overflow:hidden}因为 li 使用了 overflow（清除浮动），padding-bottom失效解决办法有：一、将overflow去掉，使用float。二、 .clearfix{ 　　*zoom: 1; 　　&...

安卓 marginBottom失效

李云汉的博客

08-02

614

今天遇到了一个奇葩的问题，releativeLayout的marginBottom设置无效我明明设置了marginBottom，发现只要动态设置view的高度，marginBottom不是显示异常就是等于0无效但是在view下面随便加个其他的view，marginBottom就好使了。。

移动端开发底部元素margin-bottom失效解决办法

weixin_30448685的博客

02-06

478

一、情景记得之前开发一个微信端页面时，发现页面底部元素margin-bottom在ios下失效，在安卓内正常...... 1.safari浏览器内页面底部元素设置margin-bottom失效； 2.h5页面内嵌app，ios下同样失效； 3.h5页面微信端，ios下同样失效；二、解决办法 1.在底部使用空白div撑起高度，缺点是会多出来不必要的div。 2.给body设置...

html-css表单的margin-right/padding-right属性设置无效解决办法

橘子味''的博客

09-01

8431

博主原来一开始是想实现form标签中的input元素离浏览器的右边界有一定距离的效果，但是无论我在input的css中调margin-right还是在form中调padding-right都不能实现前面说的效果，后来博主改变思路用div来包裹input在调padding还是不行，我擦。于是我在改变思路用table来包裹，然后再调padding，嘿，这下可以了。调整失败的代码 <!DOCTYPE

<span>和<a>的margin上下和padding上下不起作用的原因和解决

weixin_30443731的博客

04-22

1121

使用到了<span>和<a>标签，发现在样式里面直接写margin-top、margin-bottom和padding-top、padding-bottom都不起作用，页面样式的东西懂得不多，搜索一番，发现是因为<span>和<a>都不是块级元素，所以这几个属性都无效。 解决办法：在样式中加入display:block;即可解决问题。 span...

pagination样式失效解决

zjh12312311的博客

02-19

3289

问题:之前使用pagination成功了，但换了一套模板做却出现了pagination样式失效的问题，在网页上的显示如下 html和js代码：https://blog.youkuaiyun.com/zjh12312311/article/details/104360399 分析：在bootstrap-paginator.js源码中，有设置css样式的代码如下但是在浏览器工具中，分页列表并没有加...

##CSS布局-a标签中的padding-top不起作用的解决方法

七元八元

05-16

7606

1、a标签元素是内联元素，默认上下内边距跟上下外边距不起作用；nav ul { overflow: hidden; border-left: .1em solid; } nav li { display: inline; } nav li a { padding: .5em 3em; //只设置标签的上下内边距 border-right: .1em so...

html中的margin和padding

09-23

### 回答1： HTML中的margin和padding是用于控制元素边框周围空白区域的属性。 margin指元素的边框周围的空白区域，包括上...在实际应用中，我们可以根据具体情况灵活运用margin和padding来调整元素的外观和布局效果。