为什么我不能对我的 H1 元素应用边距？答案

【问题标题】：Why can't I apply margin to my H1 element?为什么我不能对我的 H1 元素应用边距？
【发布时间】：2023-03-11 09:32:01
【问题描述】：

我正在尝试使我的 h1 文本不会向左挤压。我也在使用引导程序，所以我不确定这是否会影响：

h1 {
    margin: 5px 40px 10px 70px;
}

<html>
 
    <head>
   
    <script src="https://use.fontawesome.com/d712ea1844.js"></script>
   
   
    <title>About Mike</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="css/a1.css" rel="stylesheet">
   
    </head>
   
    <body>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">About Mike</a>
                </div>
 
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="../index.html">Home<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Resume</a></li>
                        <li><a href="artifact1/ArtifactPage1.html">Artifact 1</a></li>
                        <li><a href="../artifact2/ArtifactPage2.html">Artifact 2</a></li>
                    </ul>
                </div>
            </div>
        </nav>
               
        
            <h1 id="annoyingtitle">Examples of Work</h1>
            <p id="p0">This is an example of a paper I wrote while I attended Frankline Pierce University.  In this paper I look at the lenses at which mental illness is viewed in different parts of the world.</p>
    <br/>
        
        <A id="mentallink" HREF="mentalillness.docx">Mental Illness Cultural Lenses and Barriers</A>
        
    <br/>
    
        
    <p id="p1">	Reflection: Writing this essay was easily one of my hardest assignments I have ever done.  It involved levels of research that I hadn’t done before.  I learned how to form an argument while drawing evidence from multiple sources.  This has helped me in my research and writing skills.  My favorite part of writing this paper was doing the research.  On this assignment we were allowed to pull sources from almost anywhere as long as they were credible,  I enjoyed being able to go as far as my mind could take me.  The one risk I believe I took with this project was the structure and flow.  The entire assignment was 9 pages long. This made my biggest problem getting it all to flow together and getting my ideas in the right order.  If I could re-do this assignment I wish I would write a better conclusion to the paper.    </p>
    <br/>
 
    <div id="annoying">
        <ul id="list1" class="text-center list-unstyled">
            <li class="col-md-4"> <i class="fa fa-lg fa-twitter-square" aria-hidden="true"></i>
                <br>
                <a href="https://twitter.com/m">@M</a>
            </li>
            <li class="col-md-3"> <i class="fa fa-lg fa-facebook-official" aria-hidden="true"></i>
                <br>
                <a href="https://www.facebook.com/mike">mike</a>
            </li>
            <li class="col-md-3"> <i class="fa fa-lg fa-envelope" aria-hidden="true"></i>
                <br>
                <a href="email@email.com">email@email.com</a>
            </li>
        </ul>
    </div>
    </body>
</html>

【问题讨论】：

我不知道你为什么不能？我复制了你的代码，边距有效
是否涉及其他 CSS？
不涉及其他 CSS。我觉得我的 HTML 文件必须是别的东西。我真的迷路了哈哈。
我觉得自己像个白痴。我可以看到它在 JSFiddle 中有效，但我不知道为什么我在 google chrome 中的预览不会显示它。我已经清除了这两个程序的缓存。
请确保您的浏览器中的本地URL是正确的等，尝试不同的浏览器。要么必须有一个没有封闭标记的元素，要么必须有另一个 CSS 文件覆盖你的 h1 元素，要么你没有发布的东西与你的样式冲突。

标签： css twitter-bootstrap margin heading

【解决方案1】：

您的保证金正在发挥作用。您希望您的 h1 不向左挤压吗？水平居中怎么样？（不过，我通常将页边距底部放在标题上）

h1 {
    margin: 0 0 10px 0;
    text-align: center;
}

【讨论】：

出于某种原因，我的 h1 仍然完全不动。我不知道我做错了什么。 HTML中可能还有其他东西弄乱了它吗？
我们应该如何知道、编辑您的答案并发布您的完整 HTML

【解决方案2】：

确保您正在保存文件、刷新浏览器、可能会清除缓存、关闭浏览器并重新打开、对文本编辑器执行相同操作等。您的代码确实有效。

确保本地 URL 在您的浏览器等中是正确的，或者发布您的整个代码。尝试不同的浏览器。要么必须有一个没有封闭标签的元素，要么必须有另一个 CSS 文件覆盖了你的 h1 元素，要么你没有发布的东西与你的样式冲突。

【讨论】：