Question 245409 in Html Question posted in
Some basic documentation can be found here.

Html – preventing padding-left from pushing other items left

I am trying to place the id "homescore" to the right of the id "hometeam" using padding-left (pl in tailwind).

/* eslint-disable react/prop-types */
const Matches = (props) => {

  return (
    <div className='flex items-center justify-center'>
      <div className='flex flex-col items-center justify-center league-container  hover:bg-slate-100' id="teams">
        <div className='flex items-center' id='hometeam'>
          <img className='w-18 h-18' src={props.homeLogo}></img>
          <h2 className='pl-2 font-semibold'>{props.homeName}</h2>
          <h2 className="font-bold pl-16" id="homescore">1</h2>
        </div>
        <div className='flex items-center pt-1 ' id='awayteam'>
          <img className='w-18 h-18' src={props.awayLogo}></img>
          <h2 className='pl-2 font-semibold'>{props.awayName}</h2>
        </div>
      </div>
    </div>
  )
}

export default Matches;

This has the following effect => enter image description here

As you can see this just pushes both "homeLogo", and "homeName" to the left when their position should remain the same.

What I have tried

I tried making the other items position absolute, like this =>

<div className='flex items-center' id='hometeam'>
          <img className='w-18 h-18 absolute' src={props.homeLogo}></img>
          <h2 className='pl-2 font-semibold absolute'>{props.homeName}</h2>
          <h2 className="font-bold pl-16" id="homescore">1</h2>
        </div>

This just made it a weird clutter => enter image description here

Here is the css file with the custom rules for context

@tailwind base;
@tailwind components;
@tailwind utilities;

.w-470 {
  width: 470px;
}

.custom-padding {
  padding-top: 15px;
}

.padding-left {
  padding-left: 15px;
}

.padding-67 {
  padding-top: 67px;
}

.league-container {
  border: 1px solid #D9D9D9;
  width: 350px;
  height: 80px;
}

.w-18 {
  width: 23px;
}

.h-18 {
  width: 23px;
}

.logo-padding {
  padding-right:86px;
}

.left-padding-logo {
  padding-left:110px;
}

Any ideas?

Tags:

2

Answers


  1. 0

    You’re trying to space the home team’s name and score using padding-left (or pl in Tailwind CSS). Based on your code, you’ve already added a pl-16 class to the homescore ID. This adds a padding of 4rem (or 64 pixels) to the left of the score.

    If you want to increase the space, you can use a higher value for pl, like pl-20 or pl-24.
    Here’s your code with the padding adjusted:

    const Matches = (props) => {
  return (
    <div className='flex items-center justify-center'>
      <div className='flex flex-col items-center justify-center league-container  hover:bg-slate-100' id="teams">
        <div className='flex items-center' id='hometeam'>
          <img className='w-18 h-18' src={props.homeLogo} alt="Home Team Logo"></img>
          <h2 className='pl-2 font-semibold'>{props.homeName}</h2>
          <h2 className="font-bold pl-20" id="homescore">1</h2> {/* Adjusted padding here */}
        </div>
        <div className='flex items-center pt-1 ' id='awayteam'>
          <img className='w-18 h-18' src={props.awayLogo} alt="Away Team Logo"></img>
          <h2 className='pl-2 font-semibold'>{props.awayName}</h2>
        </div>
      </div>
    </div>
  )
}

export default Matches;

    Additionally, I added alt attributes to the image tags. This improves accessibility and avoids potential warnings or errors from linters.

    Adjust the pl-20 value as needed to achieve the desired spacing.

    Login or Signup to reply.
  2. 0

    Maybe this is what you are trying to do:

    <div className='flex items-center justify-center'>
  <div className='flex flex-col items-start justify-center league-container px-16 hover:bg-slate-100' id="teams">
    <div className='w-full flex justify-between items-center' id='hometeam'>
      <img className='w-18 h-18 flex-none' src={props.homeLogo}></img>
      <h2 className='pl-2 font-semibold'>{props.homeName}</h2>
      <h2 className="font-bold pl-16" id="homescore">1</h2>
    </div>
    <div className='flex justify-between items-center pt-1 ' id='awayteam'>
      <img className='w-18 h-18 flex-none' src={props.awayLogo}></img>
      <h2 className='pl-2 font-semibold'>{props.awayName}</h2>
    </div>
  </div>
</div>

    I re-engineered the code a bit and moved the padding to the parent block with px-16. Then I further set the children divs to be flex-ed and their corresponding content justified with space-between so as to extend and somewhat float both the homescore and hometeam divs to the horizontal ends of the parent div.

    With the above code, I was able to achieve something like this:

    enter image description here

    You can adjust the padding on the parent block as you prefer. Hopefully this solves your problem.

    Cheers

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

Back To Top
Search