Ways to insert a gap underneath every line

Hello, I'm struggling to create space below each line of code. I've tried using the br tag and margin property, but it didn't work. Can anyone help me with this?

I'm not sure if the current HTML structure is correct or if I should switch to a table format to achieve the desired spacing between lines. Using a table does allow for spaces below each line, but the code becomes too lengthy in HTML compared to another method.

<table>
                            <tr>
                              <td>Etiam poseure</td>
                              <td class="tučny__text">Nulla est</td>
                            </tr>
                            <tr>
                              <td>Fusce wisi</td>
                              <td class="tučny__text">2305</td>
                            </tr>
                            <tr>
                              <td>Bla hola tola et</td>
                              <td class="tučny__text">Rerum trada</td>
                            </tr>
                            <tr>
                              <td>Vie visi</td>
                              <td class="tučny__text">A</td>
                            </tr>
                          </table>

And this is how it looks with the br tag in HTML:

<div class="card-table">
    <div class="left-column">
      Etiam poseure <br />
      Fusce wisi <br />
      Bla hola tola et <br />
      Vie wisi
    </div>
    <div class="right-column">
      Nulla est<br />
      2305 <br />
      Rerurm trada <br />
      A
    </div>
  </div>

Here's the CSS code associated with the above HTML:

.card-table{

display: flex;
justify-content: space-between;
font-size: 1.25rem;
border: 1px solid black;
}

.left-column {
  flex-basis: 45%;
  font-weight: normal;
  font-style: italic;
  text-align: right;

}

.right-column {
  flex-basis: 45%;
  text-align: left;

}


.left-column br,
.right-column br {
  margin-bottom: 10px; 
}

Answer №1

I prefer not to use <br/> because it lacks semantic meaning.

Here is an illustration:

.card-table {
  display: flex;
  justify-content: space-between;
  font-size: 1.25rem;
  border: 1px solid black;
}

.left-column, .right-column {
  display: flex;
  flex-direction: column;
}

.left-column {
  flex-basis: 45%;
  font-weight: normal;
  font-style: italic;
  text-align: right;
}

.right-column {
  flex-basis: 45%;
  text-align: left;
}

.left-column div, .right-column div {
  margin-bottom: 10px;
}
<div class="card-table">
    <div class="left-column">
      <div>Etiam poseure</div>
      <div>Fusce wisi</div>
      <div>Bla hola tola et</div>
      <div>Vie wisi</div>
    </div>
    <div class="right-column">
      <div>Nulla est</div>
      <div>2305</div>
      <div>Rerurm trada</div>
      <div>A</div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include multiple <p> elements in a row using Bootstrap?

What is the best way to display multiple <p> elements inline using Bootstrap? This is the code I have currently: <div className="container d-inline-flex"> <p className="text-nowrap"> This is sent ...

Div that scrolls only when children can be displayed without overflowing

I am seeking a solution to ensure that the children inside my scrollable div are only visible in their entirety. HTML <div id="container"> <div class="child"></div> <div class="child"></div> <div class= ...

Bootstrap does not support horizontal alignment of columns

I can't seem to get my columns to align horizontally in bootstrap. I want the image on the left and the text on the right, but they keep stacking vertically. Can someone help me with this? As far as I know, col-md-6 should divide the page into 2 colu ...

What is the best way to maintain consistent scaling for elements of varying widths and heights?

I'm searching for a method to evenly scale my elements regardless of their width and height. I don't want them to be proportional to their size. Check out the JSFiddle version body, html { height: 100%; width: 100%; margin: 0; backgro ...

"Border-radius becomes less prominent on pointer interaction in Chrome and Safari due to WebKit's behavior

Having an issue with a list inside a div. The problem arises when there is a div containing a list, which limits the visibility of items for users. If the limit is exceeded, a scroll bar appears inside the div to allow users to see more items. Additionally ...

How can I assign a background image to a specific state or template using AngularJS?

While attempting to style the entire template with a CSS div tag, I encountered an issue. The code snippet used was: <div ng-style="{'background-image': 'url(/images/food.png)', 'background-repeat': 'repeat-y'}"& ...

Utilizing ellipses within a list item to create a visually appealing design

I've been struggling with this problem for hours, but I can't seem to find a solution. How can I ensure that the text in a list item respects the size of its parent container and uses an ellipsis when necessary? Here's the scenario: <?P ...

Turn off scrolling but allow dragging on iPhone

Is it possible to disable scrolling but still allow dragging on the <canvas> element in iPhone? Currently, when you drag the <canvas>, the entire page also scrolls, which is not the desired behavior. <meta name="viewport" content="wid ...

Is there a method in VBA to access elements generated by javascript code?

After spending several hours conducting thorough research on Google (including browsing StackOverflow), I've been trying to find a method that would allow me to target HTML elements generated by JavaScript in VBA. For instance, using ie.Document.getE ...

Error Encountered in Laravel 5.2 FormBuilder.php

Encountering Laravel 5.2 ErrorException in FormBuilder.php on line 1235 stating that the method 'style' does not exist. This error has me perplexed. I have already made updates to my composer.json file by adding "laravelcollective/html": "^5.2" ...

Tips on updating primeng Panel Menu appearance with scss

I'm looking to customize the color of my panel menu to black. Below is the HTML code I am using. <p-panelMenu styleClass="font-bold text-xs m-0 w-11" [model]="items" [multiple]='false'></p-panelMenu> ...

The button works properly in JSFiddle, however, it is not able to clear the ordered list in the

DEMO Creating a script that captures mouse click coordinates and appends them to a list. The functionality works, except for an issue with the clear button not working properly. After making corrections in jsfiddle, the script functions correctly. Howeve ...

The Date Filter is causing a glitch in formatting the date value

I have a variable called dateSubmitted with the value of "dateSubmitted": "07-09-20:11:03:30" Currently, I am utilizing Angular Version 7 Within my HTML code, I am using the date filter to format the date like so: <td> {{element.dateSubmi ...

Breaking up and Substituting text within Angular 8's HTML structure

When I retrieve data from a REST api, I need to split the name parameter at '2330' and insert a line break. For example, if the name is: ABCD 2330 This is My Name, I want the output on my screen to appear as: ABCD 2330 This is My Name // this par ...

The relative positioning is currently being obstructed

Having some trouble using position:relative to shift my logo to the left of my webpage. Oddly, moving it 20px seems to have no effect, but shifting it by 300px downwards causes it to vanish completely. Here's a snippet of my current code: .container ...

Customize Bootstrap radio buttons to resemble standard buttons with added form validation styling

Is there a way to style radio buttons to look like normal buttons while maintaining their functionality and form validation? I have two radio buttons that need styling but should still behave like radio buttons. Additionally, I am utilizing Bootstrap for s ...

Searching for a JavaScript tool that offers syntax highlighting capabilities

I have come across some excellent RTE HTML text editors such as jsredaktor, TinyMCE, and FCK Editor, but I am in search of an HTML/JavaScript component that functions similarly to a TEXTAREA with built-in code syntax highlighting. ...

"Customize the dimensions and scroll behavior of a division

I've been struggling to make a single-page site full-width, and I can't seem to get it right. My goal is to create sections that are: Full width Background image full width The height of the div should be at least the same as the image, adjust ...

Change the location of an HTML element within the page structure

Let's consider having 3 elements like this: <h1>Hello</h1> <p>hello</p> <h1>Hello</h1> I am looking to remove the second <h1> as I only want it to appear once on the page. However, I would like to have flexib ...

Email confirmation based on checkbox status in PHP contact form

My goal is to make my file called send_form_email.php work by sending an email with a way to indicate which checkboxes are checked. Right now, it sends the form successfully, but doesn't include any information about the checked items. The following ...