CODEWITHSUNDEEP
htmlcss
ZPA
ZPA

Reputation: 97

CSS: Positioning of text

I am a beginner at CSS's programming and have a question about text positioning. I have to design download button in CSS without symbol font or images in it. I've done that, but text doesn't want to fit inside box (picture 1).

Text doen't fit inside the box

This is my CSS code:

#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);
}

This is my HTML code:

<!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>

I would be glad, if anyone told me, what I did wrong. Thank you very much! :)

Upvotes: 0

Views: 71

Answers (1)

r3mainer
r3mainer

Reputation: 24587

Just remove the margin from your <p> element:

#download p {
  margin: 0;
}

(Side question: what is padding-bottom: 300px doing in there? Is that really necessary?)

Here's your markup with the added CSS rule:

#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);
}
<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>

Upvotes: 2

Related Questions