Question

我是CSS编程的初学者，对文本定位有疑问。我必须在CSS 中设计下载按钮，其中没有符号字体或图像。我已经做到了，但是文字并不想放在盒子里面（图片1）。

这是我的CSS代码：

#download{
  background-color: rgb(0, 230, 0);
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  width: 235px;
  height: 65px;
}

#download p{
  font-family: 'Roboto Slab', serif;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  font-size: 30px;
  color:white;
  padding-left: 50px;
  padding-bottom: 300px;
}

#ikonad{
  border-radius: 150px;
  border-color: rgb(0, 179, 0);
  border-width: 3px;
  border-style: solid;
  background-color: rgb(242, 242, 242);
  height: 58px;
  width: 58px;
  padding-left: 1px;
  padding-top: 1px;
}
.kvadrat{
  width: 15px;
    height: 20px;
    background: rgb(0, 179, 0);
  margin-left: 20px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  padding-top: 8px;
}
#trikotnik {
  padding-top: 10px;
  margin-left: 12.5px;
  width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid rgb(0, 179, 0);
}

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Gumbi</title>
</head>
<body>
<div id="download">
<div id="ikonad">
<div class="kvadrat"><p>Download</p></div>
<div id="trikotnik"></div></div>

</div>

如果有人告诉我，我做错了，我会很高兴的。非常感谢你！：）

Answer 1

只需从<p>元素中移除边距：

#download p {
  margin: 0;
}

（旁边的问题：padding-bottom: 300px在那里做什么？真的有必要吗？）

这是使用添加的CSS规则的标记：

＆＃13;

#download {
  background-color: rgb(0, 230, 0);
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  width: 235px;
  height: 65px;
}
#download p {
  font-family: 'Roboto Slab', serif;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  font-size: 30px;
  color: white;
  margin: 0;
  padding-left: 50px;
  padding-bottom: 300px;
}
#ikonad {
  border-radius: 150px;
  border-color: rgb(0, 179, 0);
  border-width: 3px;
  border-style: solid;
  background-color: rgb(242, 242, 242);
  height: 58px;
  width: 58px;
  padding-left: 1px;
  padding-top: 1px;
}
.kvadrat {
  width: 15px;
  height: 20px;
  background: rgb(0, 179, 0);
  margin-left: 20px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  padding-top: 8px;
}
#trikotnik {
  padding-top: 10px;
  margin-left: 12.5px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid rgb(0, 179, 0);
}

＆＃13;

<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<div id="download">
  <div id="ikonad">
    <div class="kvadrat">
      <p>Download</p>
    </div>
    <div id="trikotnik"></div>
  </div>
</div>

＆＃13;

CSS：文本的定位

1 个答案: