Question

我是一个学生，他在几个飞蛾中为我的大学赚了一些钱。我从未直接体验过html或css。这主要是一种爱好。

我正在尝试制作一个有红色背景的截止日期。我不知道为什么，但我在两侧的文字线上有白色边框。但更令人讨厌的是，顶部的边界，根本不应该有边框或空白区域。

这可能很简单，请你看看吗？编辑：忘了告诉你我只能使用css ot = r html，没有Javascript。

我的html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <link rel="stylesheet" href="Standart.css"> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>
<div id='headline'>
<h1> Test </h1>
</div>

</body>
</html>

我的CSS：

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);

#headline {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 24px;
    position: relative;
    text-align: center;
    color: #ffffff;
    background-color: #e31f36;


}

#bild {

}

#bildweg {


}


#menueoben {


}

Answer 1

根据浏览器的不同，h1标记（以及许多其他标记）具有继承的样式。您可以通过重置删除填充/边距：

JS Fiddle

body, html {
    padding: 0; 
    margin: 0;
}
h1 {
    padding: 0;
    margin: 0;
}

我建议使用完整的CSS重置，例如：Reset CSS

Answer 2

尝试在CSS文件的顶部设置：

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%;
    font: inherit;
    vertical-align: baseline;
}

这会重置所有浏览器差异，我从这里得到http://meyerweb.com/eric/tools/css/reset/

Answer 3

我没有看到您的文字周围有白色边框的问题，但为了解决您的空白问题，请将此添加到您的CSS中

$interval = new DateInterval('P2Y4DT6H8M');
echo $interval->format('%d days');

请参阅小提琴：http://jsfiddle.net/1g1pdqbc/1/

Answer 4

这有效（see fiddle）：

body {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}

#headline h1 {
  margin-top: 0;
}

有文本背景上的白色边框

4 个答案: