Wanna move 'Home Contact us' text upraised?

How can I upraised my text ’ home contact us’ text ?
background-color: lightcoral;
width: 1450px;

padding: 55px;
margin: 120px;
margin-left: 0px;
margin-right: 0px;
     padding-left: 1250px;
     width: 180px;

    padding-right: 500px;
    margin-left: 0px;
    margin-top: 0px;
    text-align: center;
    padding-left: 150px;
    padding-right: 100px;
    text-align: center;
    padding-left: 100px;
    padding-left: 600px;

   margin-bottom: 100px;
    font-family:   sans-serif;
    white-space: normal;
    position: relative;
    font-family: sans-serif;
    padding-left: 900px;
    white-space: nowrap;

<link rel="stylesheet" href="home.css">

Home Contact us

<div class="letscode"><img  id='col' src="1.PNG"  width="42" height="42"></div>
 <h1>CIRCLE - Tech karo </h1>
    <p>The <b><em>#TechKaro</em></b> program  is one of <b>circle's</b> key  initiative , run in partnership with <b>EngroVopak & Engro  Foundation</b>.
        The project is currently training nearly 300 young people,primarily women, from undeserved communities in tech based courses such as Front-End Web Development(HTML,CSS,React,JavaScript),Graphics and Digital Marketing. </p>
        <img id="tech" src="2.jpg"  width="55" height="55">

What do you mean by upraised?

If you want UPPERCASE text you could do text-transform: uppercase;.

If you want the text to look like it’s hovering over the page, you could use transform: translateY(-0.1em); to move it vertically up, and then text-shadow: 0 0.1em rgba(0, 0, 0, 0.5); to cast a shadow underneath it.

If you want the text to be superscript(like this) you can use vertical-align: super; to raise the text and make the line taller (or position: relative; top: -0.5em; if you don’t want to make the line taller), and then font-size: 0.83em; to make the text smaller.

@reset Thank you for response. What do I write for the horizontal space between the text?

See line-height on MDN. Gist is bigger line-height translates to larger horizontal space between lines of text.

For spaces between paragraphs, use margin.

You currently have “Home” and “Contact us” within one element:

<div class="leap" >
    <p id="do">
        <b id="home">Home   Contact us </b>

Assuming that is supposed to be a navigation, where a click to “Home” leads to the start and “Contact us” to a contact page/section, it doesn’t make sense to put them inside the same element. Once you’ve put them into their own elements (I’d suggest an <a> tag if it’s a navigation), you can use margins to create horizontal space between them.

To add horizontal space between pieces of text, the recommended way is to split the two pieces of text into separate elements. Instead of this:

<b id="home">Home       Contact Us</b>

Do this:

<a class="link">Home</a><a class="link">Contact Us</a>

Then you can add horizontal space between them using css, for example with the margin property:

.link {
  The first number, 0, represents vertical space.
  The second represents horizontal space.
  margin: 0 1em;

This comment about line-height won’t work – line-height provides vertical space, not horizontal space.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.