删除填充，将文本对齐div的顶部

Question

我正在创建一个打印CSS！因为我必须在模板上打印，所以我使用mm作为单位！

我的问题是如何看到红色文字没有对齐到白色框的顶部，看起来白色的盒子有一个填充！我希望文本正好在红线下方1毫米处。我试着给文本margin-top:1mm，但文字留在了这个位置！ http://jsfiddle.net/WkhPb我想保持mm为单位我需要改变什么？感谢

我的HTML：

<div id="box">
 <div id="adress">
  <a>Das ist Box 1</a>
 </div>
</div>

的CSS：

#box{
   height:40mm;
   width:90mm;
   background-color:yellow;
   padding-left: 6mm;
   padding-right: 5mm;
   padding-top: 2mm;
}

#adress {
    border: 1px solid red;
    width: 30mm;
    height: 20mm;
    background-color: white;
}

#adress a {
    color: red;
    font-size: 2mm;
    margin-left: 1mm;
    margin-top: 0mm;
    line-height: 0mm;
}

http://jsfiddle.net/WkhPb/

Answer 1

您需要在包含div上添加3mm的行高以匹配您的字体，并从您需要的顶部给它1mm的边距。您可能希望在div的两侧放置填充，以便文本不会就位于其上。

#adress {
    line-height:3mm;
    padding:0 1mm;
}

Answer 2

您可以在链接上使用position : absolute

http://jsfiddle.net/WkhPb/3/

#adress a {
    color: red;
    font-size: 2mm;
    position:absolute;
    top:1mm;
    left:1mm;
}

父母的

和position:relative

Answer 3

删除浏览器应用的填充和边距并将其设置为0;

其次您必须将链接的显示属性设置为block或inline-block才能应用保证金。

*{
  padding:0;
  margin:0;
 }


#address a{
 display:block;
}

DEMO FIDDLE

Answer 4

你说：＆＃34;我希望文字正好在1 mm 上面红线。＆＃34;

fiddle

将你的CSS更改为：

#adress a {
        color: red;
        font-size: 2mm;
        margin-left: 1mm;
        margin-top: -2mm; /* changed */
        line-height: 0mm;
        display:block;  /* added */
    }

Answer 5

使用：

padding: 0px;

内部#adress。