css Question posted in
Some basic documentation can be found here.

Css – span with large font-size makes large "space after paragraph" things on paragraph

So i make a paragraph with a span for different font size in it (60px only text in span). when it comes to next line it makes a large separates space for first and second line.

Problem 

span {
  color: var(--orange-yellow-crayola);
  display: inline-block;
  font-size: 60px;
  position: relative;
  font-family: GreatVibes-Regular;
  margin-top: -20px;
}
<p style="margin-left: -1px;">
  <span>I</span> 'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media. I enjoy turning complex problems into simple, beautiful and intuitive designs. My job is to build your website so that it is functional
  and user-friendly but at the same time attractive.
</p>

So im trying to make a different p and adjust the margin top so the text separates in normal distances.

Solution for Problem 1

But when im trying to make it responsive with smaller screen device, the span collapse with p because "display:inblock;".

Problem 2

Had you guys have any solution for this problem? (sorry for bad english)

span {
  color: var(--orange-yellow-crayola);
  display: inline-block;
  font-size: 60px;
  position: relative;
  font-family: GreatVibes-Regular;
  margin-top: -20px;
}
<p style="margin-left: -1px;">
  <span>I</span>'m Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media.
</p>
<p style="margin-top: -35px;">I enjoy turning complex problems into simple, beautiful and intuitive designs. My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that
  is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.
</p>
Tags:

2

Answers


  1. 0

    You could use the CSS-selector :first-letter instead of a span-element and set the first letter to line-height: 0:

    p {
  padding-top: 1.5rem;
}

p:first-letter {
  color: red;
  line-height: 0;
  font-size: 3rem;
}
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, assumenda? Reprehenderit culpa magni ratione. Tempora voluptatem quaerat deserunt laborum doloribus vero, velit neque commodi, facere eligendi, libero sequi reprehenderit delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, assumenda? Reprehenderit culpa magni ratione. Tempora voluptatem quaerat deserunt laborum doloribus vero, velit neque commodi, facere eligendi, libero sequi reprehenderit delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, assumenda? Reprehenderit culpa magni ratione. Tempora voluptatem quaerat deserunt laborum doloribus vero, velit neque commodi, facere eligendi, libero sequi reprehenderit delectus.</p>
    Login or Signup to reply.
  2. 0

    As explained by makkusu : ::first-letter and/or a line-height of 0px would do the trick.

    The reason for this "margin" is the bounding box of a glyph/character:

    Each font has metrics defining the space above and below the baseline. These values are also called ascender and decender. See also "Understanding typography"

    In other words: the browser text composing engine ensures characters won’t collide vertically (or horizontally).

    Here is an example illustrating these bounding boxes:

    body{
font-size:10vmin
}

span {
  color:red;
  font-size: 3em;
  outline:1px solid red;
}

small{
  font-size:1em;
  outline:1px solid red;
}
    <p>
  <span>Q</span> <small>Q</small> I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media. I enjoy turning complex problems into simple, beautiful and intuitive designs. My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that
  is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.
</p>
<p ><span>Ä</span> <small>Ä</small> I enjoy turning complex problems into simple, beautiful and intuitive designs. My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that
  is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.
</p>

    We may also see implementations of new initial/drop cap properties like initial-letter-align – currently very experimental.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search