无法在外部css表中定义填充和边距

Question

I'm trying to define some css styling to an < a > element, in particular, padding and margins. I've noticed that when I'm trying to define it in-line, it's working, but when I try to use a class selector in an external style sheet, for some reason it is not working. The weird thing is that other attributes (like height), does work in the external file.

The relevant php code:

    <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>

The css code:

#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

Seems you just can't override previous defined padding & margin, while you doing that inline, inline styles have bigger priority and applies.

Try to read this article, it can helps to understand a problem https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity