为什么我不能对我的H1元素应用保证金?

时间:2017-04-12 13:51:15

标签: css twitter-bootstrap margin heading

我试图让我的h1文字不要向左压扁。我也在使用bootstrap,所以我不确定这是否会产生任何影响:

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>

2 个答案:

答案 0 :(得分:1)

您的保证金正在运作。你想让你的h1不要向左压扁?水平居中怎么样? (我通常会将标题放在标题上)

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

答案 1 :(得分:0)

Make sure you are saving the file, refreshing your browser, maybe clearing your cache, close your browser and re-open, do the same for your text editor, etc. Your code does work.

Make sure the local URL is correct in your browser, etc., or post your entire code. Try a different browser. There either has to be an element that doesn't have a closed tag, another CSS file that is overriding your h1 elements, or something that you have not posted that is conflicting with your styles.