Another option for replacing <BR> tags with CSS styling

I am currently utilizing the br tag to insert line breaks in my website's faq section. Although the output is accurate, I'm exploring alternatives like implementing linebreak through CSS to enhance responsiveness. During my research, I came across the pseudo element but didn't find a clear representation of it.

.faqfirstsec {
  margin: 0 0 0 70px;
  background: lightgrey;
  height: 100%;
}

font.faqtitle {
  font-weight: bold;
}

font.faqques {
  color: red;
}
<div class="faqfirstsec">
  <font class="faqtitle" weight="bold">TITLE</font><br><br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <font class="faqques">QUESTION 1</font><br><br>
  <font class="faqans">ANSWER 1<br> ANSWER 1。</font><br><br><br><br><br>
  <font class="faqques">QUESTION 2</font><br> ANSWER 2<br><br><br><br>
  <font class="faqques">QUESTION 3</font><br> ANSWER 3<br><br>
</div>


I aim to create some spacing between question 1, 2, and onwards. I have been using the font class tag but unable to apply Margin. Would switching to DIV instead of FONT be more suitable?

htmlcss

Answer №1

.custom-section {
margin: 0 0 0 70px;
background: lightgrey;
  height : 100%;           /* this won't have much effect unless the parent has a defined height */
}

.section-title {
font-weight: bold;
  margin-bottom: 10px;
}

.question-text {
color: red;
  margin-bottom: 15px;
}

.answer-text {
  margin-bottom: 35px;
}
<div class="custom-section">
  <div class="section-title">TITLE</div>

  <div class ="question-text">QUESTION 1</div>
  <div class="answer-text">ANSWER 1<br>ANSWER 1</div>
  
  <div class ="question-text">QUESTION 2</div>
  <div class="answer-text">ANSWER 2<br>ANSWER 2</div>
  
  <div class ="question-text">QUESTION 3</div>
  <div class="answer-text">ANSWER 3<br>ANSWER 3</div>
</div>

Answer №2

To make all line breaks render as <br/> in your text that contains <br/>, wrap it in an element with the style white-space: pre.

Alternatively, you can enclose your text within <pre></pre> tags.

When it comes to HTML, the following approach can be used:

 <span>hello</span><span data-x>BR!</span>

Accompanied by the corresponding CSS (apologies for not providing a snippet or fiddle as I am using my mobile device and cannot access stackoverflow's editor tools):

[data-x]:before{
    content: "\A";
    white-space: pre;
 }

Added section

Now, for your specific situation, simply try the following:

.faqans:before{
    content:"\A\A\A";/*one \A per line break*/
    white-space:pre;
}

Answer №3

Apply the following CSS properties:

margin-bottom: 100px;
display: block;

This styling is recommended for the font tag.

The font tag, being an inline element, is now outdated. It is advisable to use Div or span instead.

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

Retrieve the order in which the class names are displayed within the user interface

In the following code snippet, each div element is assigned a common class name. <div id="category_9" class="list_item" data-item_ids="[38]"</div> <div id="category_2" class="list_item" data-ite ...

javascripthtmlruby-on-railsajax

All you need to know about fundamental HTML attributes

I've been struggling to resize images on my webpage. No matter how many times I change the attributes in the image tag, the image always shows up at its original size. For example, I tried this: <img src="url" alt="some text" style="width:40px;he ...

htmlcssimage

Utilize C# and SmtpClient to efficiently send HTML emails

Is there a way to send HTML emails instead of plain text using SmtpClient? I have been following the code provided in this solution, but the output always ends up as plain text. For example, the link in the sample message below is not displayed as an activ ...

c#htmlasp.netemailsmtpclient

Adding a new row to a table is causing issues with jQuery

var info = [{ "pin": "015-08-0011-000-01", "arp": "015-08-0011-000-01", "tin": "342-432-423-000", "firstname": "John", "middlename": "James", "lastname": "Jones", "suffix": "", "qtr": "1st ...

javascriptjqueryhtml

Pop-up - maintain the initial value

I'm working on a modal using Bootstrap and React. Inside the modal, there's a dropdown with an initial empty option: <select class="form-control" onChange={this.handleSelectCat}> <option disabled selected></option> < ...

javascripthtmltwitter-bootstrapreactjsbootstrap-modal

To enable the radio button upon clicking the list item in JavaScript, simply check the radio button

I am working with radio buttons Here is the HTML code: <input type="radio" class="first" name="bright" checked> <input type="radio" class="second" name="bright" > <input type=" ...

javascripthtml

Getting data from non-input fields in Flask

Seeking some guidance here - struggling to figure out how to extract values from elements other than input fields using Python with Flask. For instance, I'm working with an HTML form containing the following elements: <form action="/newgame" metho ...

pythonhtmlflask

Is there a way to reference an image in the ROOT/app/assets/images directory prior to precompilation?

My current challenge involves using HTML to display an image before the asset precompilation process, which usually moves all images into the public folder. Whenever I use this code: <img src="Flower.jpg">, it points to the path: <RAILS ROOT>/ ...

htmlruby-on-railsimagepath

"Creating a HTML Table with Merged Cells using colspan and rowspan

Creating an HTML table with a unique layout is my latest project. I envision it to look like this: +-------+---+ | | | +-------+ + | | | +-----+-----+ | | | +-----+-----+ To achieve this, I'm utilizing a colgroup to split t ...

htmlcsshtml-table

Storing notes using HTML5 local storage

I recently developed a unique note-taking web application where users can create multiple notes and switch between them using tabs on the left side. My next step was to implement local storage for saving these notes, so I inserted the following code: $(d ...

javascriptjqueryhtmllocal-storage

Tips on ensuring that PRE elements expand to fit column size without growing when additional data is added

I am facing a design challenge where I have a main card (1) that contains two sub-cards (2 and 3) using Bootstrap columns. Sub-card number 2 adjusts its height dynamically based on the screen size, while sub-card number 3 consists of a code snippet element ...

csstwitter-bootstrapbootstrap-4pre

Using AJAX to Access PHP Variables

I am working on creating a progress bar and have the following CSS code: #result{ background:#8c8f91; margin-left: 15px; margin-right: auto; table-layout: fixed; border-collapse: collapse; z-index: -1; position:relative; width: ...

phpjquerycssajax

Using jQuery to reconstruct a list from a group of div elements

Seeking advice on how to convert an HTML section of divs into list items. Here is a sample of the current HTML structure: <div> <small>2019-10-31 10:41 Customer unregistered</small> </div> <div> <small>2019 ...

jqueryhtml

Having trouble with Isotope masonry functionality

While experimenting with Isotope from , I tested the reLayout method using the provided example found at . I copied the css and js to my page () but encountered an issue where clicking on the first element caused all other elements to move to the first col ...

javascriptjquerycss

What could be causing the appearance of a mysterious grey box hovering in the upper left portion of my image and why is the code only adjusting the size of the grey box instead of the entire

I've been working on embedding some JavaScript into my Showit website to create a drag-and-drop feature that displays a collage/mood board effect. Everything is functioning correctly, but I'm running into issues with resizing the images. There&a ...

javascripthtmljquerycss

Issue encountered when attempting to retrieve elements within an HTA's IFrame

We are currently working on automating an Intranet site using HTA and JavaScript. To bypass the browser security settings, we have implemented an Iframe within the HTA itself instead of opening the site in a browser. Despite being able to successfully logi ...

javascripthtmliframehtapeoplesoft

The primary section is not extending completely to the bottom, resulting in the footer not being aligned correctly at the bottom of the

Despite the numerous similar questions on Stack Overflow, I am struggling to get my footer positioned correctly on my page. The <footer> stubbornly remains 800px above the bottom behind the <main>. Even with various height options such as 100%, ...

htmlcss

Card carousel rotation

Apologies for the vague title, I'm unsure how to properly label my issue. I have a section set up with cards, but I'm aiming to create something resembling a menu that functions like a carousel. Essentially, I want to include right and left arro ...

jquerycsshtmlbootstrap-4

"Is an Ionic Top Navigation Bar the best choice for your

Creating an Ionic Top Navigation Bar Greetings! I am facing some challenges while trying to implement a Top Navigation Bar in my Ionic Project. Despite the lack of documentation on this specific topic, I am struggling to make it work properly. Your as ...

htmlcssionic-framework

Guarantee that unique events are triggered following h5validate events

I am currently experiencing a problem with H5Validate where its events are overriding the custom events I have implemented, causing my events not to trigger because they are based on H5validate events. To work around this issue, I have resorted to setting ...

htmljqueryvalidation