php - 无法在外部 CSS 工作表中定义填充和边距

Question

我正在尝试为 元素定义一些 css 样式，特别是填充和边距。我注意到，当我尝试在线定义它时，它可以正常工作，但是当我尝试在外部样式表中使用类选择器时，由于某种原因它不起作用。奇怪的是其他属性(如高度)确实在外部文件中起作用。

相关的php代码:

    <div id='navbar_line'>
    <nav class="home_navbar">
    <div class="container">
        <div id="navbar" class="collapse navbar-collapse" style='padding:0'>
            <ul class="nav navbar-nav home_nav">
                <?php
                // Create the top navigation list by listing the children of the homepage.
                // If the section we are in is the current (identified by $page->rootParent)
                // then note it with <a class='on'> so we can style it differently in our CSS.

                $homepage = $pages->get( "/" );
                $children = $homepage->children;

                $reversed = $children->reverse();

                foreach ($reversed as $child) {
                    echo "<li class='home_navbar_item'>";
                    echo "<a href='{$child->url}'>";
                    echo "<div class='navbar_logo'>";
                    echo    "<img src='{$child->page_logo->url}' alt='{$child->title}' height='30' width='30'>";
                    echo "</div>";

                    echo "</a>";
                    echo "</li>";
                }


                echo "<li class='home_navbar_item'> <a href='{$homepage->url}'>";
                 echo    "<img src='{$meta_data->Logo->url}' alt='{$homepage->title}' height='30' width='30'>";
                 echo "</a>";
                 echo "</li>";
                ?>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
    </nav>
</div>

CSS代码:

#lower_part span{
  padding:0; 
  margin:0;
  white-space: pre;
}


#navbar_line{
  background-color: #04619c;
  height: 137px;
  margin: auto;
}

#navbar{
  background-color: #04619c;
}

.home_navbar_item a {
  height: 300px;
  padding:0; 
  margin:0;
}

.navbar_logo{
  height: 50px;
  width: 50px;
  background-color: white;
  /*border-radius: 50%;*/
}

.carousel_image{
  width:100%;
}

.hebrew_text{
  text-align: right;
}


#scrollable_body{
  height: 100px;
  margin:0;
  padding:0;
}

.scrollable_content{
  padding:0;
  overflow: scroll; overflow-x:hidden;
  height: 500px;
  /*-webkit-overflow-scrolling: touch;*/
}

span{
  padding:4em 0 0 0;
  display:inline-block;
}

hr {
  border:none;
  border-top:1px dotted #f00;
  color:blue;
  background-color:#fff;
  height:1px;
  width:50%;
}

Answer 1

似乎你不能覆盖之前定义的填充和边距，而你这样做是内联的，内联样式有更高的优先级并适用。

尝试阅读这篇文章，它可以帮助理解一个问题https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity