how to add text up to the border line in html

Question

Currently I'm learning html and css, this question might be unclear!

The problem is that I want to add text (advertisement) at the top of the child border line but it doesn't meet the requirement see the image below the code lines and please guide me the margin property that might be meaningless for you in the css code.

#parentBox {
  border: 2px solid red;
  height: 180px;
  width: auto;
}

#childBox {
  background: #f2f2f2;
  height: 70%;
  border: 2px solid #f2f2f2;
  margin: 20px 70px 20px 340px;
}

<div id="parentBox">
  <div id="childBox">advertisement</div>
</div>`

Margin property is used to give the element margin from the parent element and not from the text inside it. If you want to do that you have to use padding but you can't move text above the border of the div coz you are writing text inside the div. For this purpose, you should write text above the div and not inside the div. — Sanchit Patiyal, Aug 02 '17 at 10:07

score 1 · Answer 1 · answered Aug 02 '17 at 11:03

Below is the solution.

CSS:

<style>
#parentBox {
  border: 2px solid red;
  height: 180px;
  width: auto;
}

#childBox {
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 13%, rgba(242,242,242,1) 14%, rgba(242,242,242,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 13%,rgba(242,242,242,1) 14%,rgba(242,242,242,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 13%,rgba(242,242,242,1) 14%,rgba(242,242,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
  height: 70%;  
  margin: 20px 70px 20px 340px;
}
</style>

HTML:

<div id="parentBox">
  <div id="childBox">advertisement</div>
</div>

score 0 · Answer 2 · answered Aug 02 '17 at 10:08

Try to make the font-size and line-height same value. In case it is still not touching the edge, you may try reducing the line-height. But if this is doing for a paragraph content with multiple lines, The content will be congested and can effect the readability.

score 0 · Accepted Answer · answered Aug 02 '17 at 10:11

Here a quick answer for what you need to display but there are others approach to do this :)

#parentBox {
  border: 2px solid red;
  height: 180px;
  width: auto;
}

#childBox {
  background: #f2f2f2;
  height: 70%;
  border: 2px solid #f2f2f2;
  margin: 0 70px 20px 340px;
}

#title{
  margin: 20px 70px 0px 340px;
}

<div id="parentBox">
  <span id="title">advertisement</span>
  <div id="childBox"></div>
</div>`

score 0 · Answer 4 · answered Aug 02 '17 at 10:34

0

So I tried your problem and here is the solution. Just add [span style="position:absolute;margin-top:-18px;"]Advertisment[/span] I Hope this solves your problem!

answered Aug 02 '17 at 10:34

Aniket Mainkar

45
10

how to add text up to the border line in html

4 Answers4