Question

我正在尝试删除导航栏中的这个小小的不需要的空间。我试过删除填充，边距和边框，但都没有解决问题。这是我的css：

root@001b19bd3cc6:/# cqlsh
Connected to Test Cluster at 127.0.0.1:9042.
[cqlsh 5.0.1 | Cassandra 3.11.1 | CQL spec 3.4.4 | Native protocol v4]
Use HELP for help.
cqlsh> CREATE KEYSPACE testkeyspace WITH REPLICATION = { 'class' : 'SimpleStrategy', 'replication_factor' : 1 };
cqlsh> USE testkeyspace ;
cqlsh:testkeyspace> CREATE OR REPLACE FUNCTION first_int(input set<int>) RETURNS NULL ON NULL INPUT RETURNS int LANGUAGE javascript AS '(function(){var result = 2;return result;})();';
cqlsh:testkeyspace> create table A (id int primary key, val set<int>);
cqlsh:testkeyspace> insert into A  (id, val) values (1, {3,5,7,1});
cqlsh:testkeyspace> select first_int(val) from A where id = 1;
Traceback (most recent call last):
  File "/usr/bin/cqlsh.py", line 1044, in perform_simple_statement
    result = future.result()
  File "/usr/share/cassandra/lib/cassandra-driver-internal-only-3.10.zip/cassandra-driver-3.10/cassandra/cluster.py", line 3826, in result
    raise self._final_exception
FunctionFailure: Error from server: code=1400 [User Defined Function failure] message="execution of 'testkeyspace.first_int[set<int>]' failed: java.security.AccessControlException: access denied: ("java.lang.RuntimePermission" "accessClassInPackage.java.io")"

.nav {
  list-style: none;
  font-family: 'Oleo Script', cursive;
  display: inline;
  margin: 0;
  padding-top: 100px;
  padding-bottom: 0px;
  float: right;
}

.header {
  background-color: rgba(0, 0, 0, .7);
  position: fixed;
  top: 0;
  padding-bottom: 0;
  margin: 0;
  width: 100%;
}

这是我所说的空间：

Unwanted Space

谢谢大家！

Answer 1

“img”元素是一个“内联”元素，它只是一个任何其他字母，如“n”，“h”或......“ p ”。它们具有“下降”部分，并且内联元素的定位是“基线”（“n”的底部位于其中）...所以您在图像下看到的不是边距或填充，而是下降部分字符p，g，j的行... 您可以将显示更改为阻止，如其他答案所示，或者只需设置vertical-align:bottom。

内联元素的默认vertical-align值为baseline，这是display:block正在工作的原因......它不是在行内容！< / p> 如果该行中没有其他内容，

line-height: 0也适用于您。

Answer 2

您的内嵌图片有一些额外的余量。将其提供给display: block和border: 0。它将解决您的问题。

.header a img{
  border:0;
  display:block;
}

Answer 3

试试这个并添加这个css：

.header a {
  display: block;
  width: 150px;
  height: 150px;
}
.header img{
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

.nav {
  list-style: none;
  font-family: 'Oleo Script', cursive;
  display: inline;
  margin: 0;
  padding-top: 100px;
  padding-bottom: 0px;
  float: right;
}

.header {
  background-color: rgba(0, 0, 0, .7);
  position: fixed;
  top: 0;
  padding-bottom: 0;
  margin: 0;
  width: 100%;
}
.header a {
  display: block;
  width: 150px;
  height: 150px;
}
.header img{
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

<div class=header>
  <a href="index.html">
    <img src="https://lh4.googleusercontent.com/-IqHfCyPGn00/AAAAAAAAAAI/AAAAAAAAAA8/WsxciIskxSo/photo.jpg?sz=328" alt="Logo.png" style="height:150px; width:150px; border-bottom: 0px;">
  </a>
</div>

＆＃13;

Answer 4

只需添加以下css。

.header a img {
display:block;
}

Answer 5

我认为它可能是margin-bottom属性的默认值。您可以按照@AnkitaPatel共享的代码进行操作。但是，您也可以尝试将margin-bottom属性更改为CSS中的“margin-bottom：0px”

我试图删除标题中不需要的空格

5 个答案: