CSS中margin不起作用的原因及解决方法

margin是一个属性,指定元素和元素之间的间距,但不能为内联元素指定边距,本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法。

margin不起作用的原因

对于初学者来说,可能会经常遇到即使你设置了margin属性但是却不起作用。

在理解margin前,我们先来看一下盒模型

立即学习“前端免费学习笔记(深入)”;

2345截图20181127095429.png

margin不起作用的原因往往是没有考虑到display:“display:block”或者“display:inline”.

我们来看具体的例子

HTML

这是一个内联块

CSS

h3{  display:inline-block;  background:#ffff00;  width:12em;  text-align:center;  margin:0 auto;}

浏览器上显示效果如下:

2345截图20181127101737.png

“margin:0 auto;”对于inline-block不起作用。

即使可以首先使用数值指定“inline-block”,使用“margin:0 auto;”居中也不起作用。

“text-align:center;”不会使父元素成为选择器

“text-align:center;”的基本规则是“selector是父元素”。在上面的示例中,如果要将其居中,则必须创建父元素。

了解了上述内容后,您就可以解决它了。

HTML

这是一个内联块

CSS

h3{  display:inline-block;  background:#ffff00;  width:12em;  margin:0 auto;}.wrap{  text-align:center;}

效果如下:

2345截图20181127102211.png

本篇文章到这里就全部结束了,关于margin属性的更多内容大家可以关注创想鸟的CSS视频教程进一步学习!!!

以上就是CSS中margin不起作用的原因及解决方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1613637.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 03:48:25
下一篇 2025年12月24日 03:48:34

相关推荐

  • css如何实现图片在div中垂直居中

    本文章主要介绍css如何实现图片在div中垂直居中问题,具有一定参考价值,希望能给大家提供帮助 平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做,今天我们来分享几种常用的css实现图片在div中垂直居中的代码 HTML代码 方法一 立即学习“前端免费学习笔记(深入…

    2025年12月24日 好文分享
    000
  • css如何去掉重叠部分的边框?

    在前端开发中,边框border属性是经常会用到的一个属性,它可以给元素添加边框;但两个相邻的元素在一起同时添加了边框,就会出现一个问题,边框会重叠在一起(如下图),那么如何去掉重叠部分的边框? 本篇文章就给大家介绍css解决边框重叠,即css去掉重叠边框的方法,让相邻的边框之间可以是单线的方式显示。…

    2025年12月24日
    000
  • css如何设置段落间距?margin 属性设置段落间距(代码实例)

    段落间距是网页设计里一个提升文章阅读体验的重要因素。但网页排版不想word那样简单,而作为网页设计师,为了读者的良好阅读体验,我们必须为文章的每个小标题和段落都预留一定的空间,用css有效率地设置段落间距。本章就给大家介绍css margin 属性是怎样设置段落间距。有一定的参考价值,有需要的朋友可…

    2025年12月24日
    000
  • CSS入门教程之margin属性

    设置外边距的最简单的办法就是运用 margin属性。margin用于设置对象标签之间间隔距离,比方2个上下排列的div盒子,我们就能够运用margin款式完成上下2个盒子间距。margin 属性承受任何长度单位,能够是像素、英寸、毫米或 em。margin 能够设置为 auto。更常见的做法是为外边…

    2025年12月24日
    000
  • css的外间距如何设置?css外间距的设置方法(附实例)

    css盒模型中有四种元素,分别是内间距、外间距、内容还有边框。这四种定义了盒模型的使用,今天我们就来说说关于css盒模型的外间距的使用吧 css的外间距如何设置? 我们的外间距是属于css盒模型之中的一种,那么现在我们来看看外间距都是怎么设置的吧。 margin: 是一个简写属性,可以一个声明中设置…

    2025年12月24日 好文分享
    000
  • CSS中如何使用负margin值来调整居中位置

    这篇文章主要介绍了css中使用负margin值来调整居中位置的方法,文中同时提到了这种常用方法的一些值得注意的地方,需要的朋友可以参考下 这或许是最常用的居中方法。如果知道了各个元素的大小,设置等于宽高一半大小的负margin值(如果没有使用box-sizing: border-box样式,还需要加…

    2025年12月24日
    000
  • css中的margin属性详解

    这次给大家带来css中的margin属性详解,使用css中margin的注意事项有哪些,下面就是实战案例,一起来看一下。 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”。这…

    2025年12月24日 好文分享
    000
  • css margin外边距属性与用法总结

    围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em、百分数值甚至负值。下面本文就来具体的谈谈外边距 margin 属性和使用,外边距的重叠和叠加,以及 ma…

    2025年12月23日 好文分享
    000
  • CSS中margin边界叠加问题的解决方法介绍(图文)

    本文主要介绍了css中margin边界叠加问题及解决方案。具有很好的参考价值。下面跟着小编一起来看下吧 CSS的margin边界叠加深度剖析 边界叠加简介 边界叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,当两个垂直边界相遇时,它们将形成一个边界。这个边界的高…

    2025年12月23日 好文分享
    000
  • 详解css的外边距margin的使用

     这篇文章详解css的外边距margin的使用 h2{margin:10px 0;}p{margin:20px 0;}……这是一个标题 这是又一个标题本例中,第一个h2的margin-bottom(10px),p的margin-top(20px),第二个h2的margin-top(10px)…

    好文分享 2025年12月23日
    000
  • 使用CSS的margin属性在页面布局中的使用攻略介绍

    margin属性可以决定很多html元素的宽高度,因而在布局方面也能够有很重要的作用,接下来我们就来看一下使用css的margin属性在页面布局中的使用攻略介绍 基础 1.元素containing-box宽高度等于内容宽度 HTML 立即学习“前端免费学习笔记(深入)”; CSS .wrap { f…

    2025年12月23日 好文分享
    000
  • 详细介绍CSS之margin知识点

    1.margin的百分比值普通元素的百分比maigin相对于容器元素的宽度(width) 进行计算的。 这里我们在图片外面设置一个宽高分别为800 * 600的容器。设置img{ margin: 10%; } 结果如下    结果margin值都是 800 * 10% = 80px; 所以这里都是相…

    2025年12月23日 好文分享
    000
  • 浅谈css中margin的重叠

    父子元素margin重叠 解决办法: 给子元素添加浮动属性,相应父元素添加必要的清浮动属性; 给父元素添加边缘属性,如padding、border; 同级元素margin反向重叠 立即学习“前端免费学习笔记(深入)”; 同级元素margin反向重叠时,元素之间的距离为两个margin值中较大的那个。…

    好文分享 2025年12月23日
    000
  • CSS重要属性之 margin 属性知识大合集介绍

    以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄。所以写成以下文章,一是供自己整理思路;二是把知识分享出来,避免各位对margin属性的误解。内容可能会有点多,但都是精华,希望大家耐心学习。 以下的分享会分为如下内容: 1.margin 属性的简单介…

    2025年12月23日 好文分享
    000
  • HTML里怎么使用margin 0 auto

    margin是一个很重要的属性,那么在html里怎么使用margin 0 auto呢?我们今天就好好介绍一下margin:0 auto,下面给大家举一个小列子 margin设置对象外边距,如果我们给DIV设置一条边框线(border)样式后,在DW软件里即可看出margin设置值其实是在边框外距离,…

    好文分享 2025年12月21日
    000
  • 如何使用css margin实现元素间距调整

    掌握 margin 的方向设置、auto 行为和折叠特性可灵活控制元素间距,通过 margin 调整块级元素垂直距离,使用 margin: 0 auto 实现水平居中,并注意相邻元素间 margin 折叠问题及解决方案。 在网页布局中,调整元素之间的间距是常见需求。CSS 的 margin 属性是控…

    2025年12月2日 web前端
    100
  • css属性padding与margin区别分析

    padding是内边距位于边框内影响内容布局,背景可见;margin是外边距位于边框外控制元素间隔,背景透明。2. padding增加元素自身占用空间,影响盒模型总宽;margin不影响元素宽高但影响布局流。3. 文字离边框远用padding,元素间留白用margin,块级居中用margin: 0 …

    2025年12月2日 web前端
    000

发表回复

登录后才能评论
关注微信