在文本背景上有白色边框
[英]Having white border on text background
问题描述
I'm a student who is making some money for my uni in a few moths.
我是一名学生，在短短的几天内就为我的大学赚了一些钱。 I never had direct experience with html or css.我从来没有直接使用 html 或 css 的经验。 It has been mostly a hobby.这主要是一种爱好。
I am trying to make a deadline, which has a red background.我正在尝试制定一个红色背景的截止日期。 I don't know why, but I have white borders at the text line at the sides.我不知道为什么，但两侧的文本行有白色边框。 But more annoying is, the border on the top, there should not be a border or white space at all.但更烦人的是，顶部的边框，根本不应该有边框或空白。
It's probably something easy, would you please have a look?这可能很简单，请您看一下好吗？ Edit: Forgot to tell you I can only use css ot=r html, no Javascript.编辑：忘了告诉你我只能使用 css ot=r html，没有 Javascript。
My html file:我的 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>
My CSS:我的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 {
}
4 个解决方案
解决方案1
0 2015-11-27 17:58:13
Depending on the browser, h1 tags (and many other tags) have inherited styles.根据浏览器的不同， h1标签（和许多其他标签）具有继承的样式。 You can remove the padding/margins with a reset:您可以通过重置删除填充/边距：
body, html {
padding: 0;
margin: 0;
}
h1 {
padding: 0;
margin: 0;
}
I would suggest using a full CSS reset such as: Reset CSS我建议使用完整的 CSS 重置，例如：重置 CSS
解决方案2
0 2015-11-27 18:00:12
Try setting this at the top of your CSS file:尝试在 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;
}
This resets all the browser differences and I got it from here http://meyerweb.com/eric/tools/css/reset/这会重置所有浏览器差异，我从这里得到它http://meyerweb.com/eric/tools/css/reset/
解决方案3
0 2015-11-27 18:02:27
I don't see an issue with white borders around your text but to fix your white space issue add this to your css我没有看到文本周围有白色边框的问题，但要解决您的空白问题，请将其添加到您的 css 中
body{margin: 0;}
#headline > h1 {margin-top: 0px;}
See fiddle: http://jsfiddle.net/1g1pdqbc/1/见小提琴： http : //jsfiddle.net/1g1pdqbc/1/
解决方案4
0 2015-11-27 18:03:24
This works ( see fiddle ):这有效（见小提琴）：
body {
margin-left: 0;
margin-right: 0;
margin-top: 0;
}
#headline h1 {
margin-top: 0;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.