Kevin Powell - Community•2mo ago

How to leave a space between elements in the same paragraph?

I was trying to do it from the frontend mentor challenges. I could not leave a space in the Nutrition section and I could not find how to do it. I attached the code I wrote and the result I got as a picture. Can you help me where I am doing wrong and what kind of perspective I need to do? Note: I have been working on the web for 3 weeks and I am open to other suggestions.

5 Replies

tototriou15•2mo ago

you should probably use html table

dugd•2mo ago

Can't I solve this with CSS?

MarkBoots•2mo ago

no, not without splitting the 2. this kind of data is a nutrition table. You're even writing the word 'table' in the sentence above. And guess what, html has <table>'s. So... use it

<table>
  <tr>
    <th>Calories</th>
    <td>277kcal</td>
  </tr>
  <tr>
    <th>Carbs</th>
    <td>8g</td>
  </tr>
  <tr>
    <th>Protein</th>
    <td>20g</td>
  </tr>
  <tr>
    <th>Fat</th>
    <td>22g</td>
  </tr>
</table>

<table>
  <tr>
    <th>Calories</th>
    <td>277kcal</td>
  </tr>
  <tr>
    <th>Carbs</th>
    <td>8g</td>
  </tr>
  <tr>
    <th>Protein</th>
    <td>20g</td>
  </tr>
  <tr>
    <th>Fat</th>
    <td>22g</td>
  </tr>
</table>

table{
  border-collapse: collapse;
  width: 100%;
}
table tr:not(:last-child) {
  border-bottom: 1px solid lightgrey;
}
table tr > :is(th, td) { 
  padding: 0.5rem 1rem;
}
table th {
  text-align: left;
  font-weight: normal;
}
table td {
  color: brown;
  font-weight: bold;
}

table{
  border-collapse: collapse;
  width: 100%;
}
table tr:not(:last-child) {
  border-bottom: 1px solid lightgrey;
}
table tr > :is(th, td) { 
  padding: 0.5rem 1rem;
}
table th {
  text-align: left;
  font-weight: normal;
}
table td {
  color: brown;
  font-weight: bold;
}

dugd•2mo ago

I feel like I have to solve everything I encounter with css, which is stupid I guess. thank you for your answer

Rowe2ry•2mo ago

Table is definitely the way to go. Also enhances your page's accessibility.

Gaming

Programming

How to leave a space between elements in the same paragraph?