Question

我目前正在开发一个网站，并且遇到了一个问题，每当我将一个href链接插入表格时，它会向前移动几个空格。有谁知道为什么会这样？

<!DOCTYPE html>

<head>
<title>Title</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="site_title1">
    <h2><span>Title</span></h2>
</div>
<div id="site_title2">
        <h4><span>subtitle</span></h4>
</div>
<div id="menu">
    <ul>
        <li class="about"><a href="about.html">About</a></li>
        <li class="events"><a href="events.html">Events</a></li>
        <li class="music"><a href="music.html">Music</a></li>
        <li class="contact"><a href="contact.html">Contact</a></li>
    </ul>

</div>
</br>
<div id="tablelist">
    <p><a href="#Orchestral">Orchestral</a> | <a href="#Chamberensemble">Chamber            Ensemble</a> | <a href="#Solo">Solo</a> | <a href="#Choral">Choral</a> | <a href="#Electronic">Electronic</a> </p>
</div>

    <a name="Chamberensemble"></a>
        <h1>Chamber Ensemble</h1>
            <table border="1">
                <tbody>
                    <tr>
                        <th>Title/Year</th>
                        <th>Instrumentation</th>
                        <th>Length</th>
                    </tr>

                    <tr>
                        <td><a href="linkinquestion.html">the link in question</a></td>
                        <td>Mezzo-soprano, Piano</td>
                        <td>15 minutes</td>
                    </tr>

                    <tr>
                        <td>this is not a link</td>
                        <td>Mezzo-soprano, Piano</td>
                        <td>15 minutes</td>
                    </tr>


</body>



<footer>
<p>Copyright 2014</p>
<br>

CSS：

    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* main font style, background color, and body margins */

body{
    font-family: "Calibri", "Candara", "Segoe", "Segoe UI", "Optima", "Arial", sans-serif;
    font-size: 14px;
    color:black;
    text-align: left;
    margin: 75px 40px 20px 125px ;
            background-color: rgb(255,255,224);

}

/* main header style */

div#site_title1 
{
    font-size: 28px;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
    color:rgb(188,143,143);
}

div#site_title2
{
    font-size: 20px;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
    color:rgb(188,143,143);
}

/*menu style*/

div#menu ul a
{
    color:black;
    font-size: 18px;
    text-decoration: none;
    margin-bottom: 10px;

}

div#menu li
{   display: inline;
}

div#menu ul a:hover
{
    color:rgb(188,143,143);
}

div#menu
{word-spacing:5px; }


#menu, a {
padding: 20px;
}

/* about and image positioning */

div#about
{
    width:500px;
}

div#images
{
    float:right;
    margin-right: 475px;
    padding-left: 15px;
    padding-bottom: 15px;
}

/* event headers and text */

div#eventheader
{
    font-size: 18px;
    color:rgb(188,143,143);
    font-weight: bold;
}

div#eventsubheader
{
    font-size: 16px;
    color:#000;
    font-weight: bold;
}

div#eventtext
{
    text-align: left;
    font-size: 16px;
    color:black;
    width:400px;
}

/* table positioning/style */

th{
    width:250px;
    padding-top: 2%;
    padding-bottom: 1%;
}

td{
    width:250px;
    padding:1%;
}

div#tablelist{
    text-align: left;
    font-size: 14px;
    color:#000;
}

table {
    margin-left: 25px;
}


/* misc. */


a {text-decoration: none;
    color:#000;
    }

a:hover {color:rgb(188,143,143);}


div#line{
    width:400px;
}


/* footer style */

footer {
    border-top: 2px solid rgb(188,143,143);
    font-size: 12px;
    margin-top: 55px;
    text-align: center;
    width: 100%;

另外，为什么我的页脚高于我的表格文本？这并不重要，因为它在实际代码中运行良好（包含更多内容），但我只是好奇。

感谢您抽出宝贵时间来回答这个问题！

JSFiddle：http://jsfiddle.net/GBuN3/

Answer 1

因为你已经应用了填充。你的代码说：

#menu, a { padding: 20px; }

上述内容会影响所有 a元素。如果您要将填充仅应用于a范围内的#menu，则应使用：

#menu, #menu a { padding: 20px; }

更新了您的小提琴：http://jsfiddle.net/GBuN3/4/

Answer 2

所以我真的从CSS文件中删除了CSS，直到问题消失。无论我上次删除的是问题的原因。我发现了这个：

#menu, a {
padding: 20px;
}

就像setek所说的那样， a 标记的填充量为20px，因此可以解释 a href 标记的20px缩进。

将href添加到表链接会创建额外的间距？

2 个答案: