Alternative for
using CSS

Question

I am using br tag to create a line break for my web page faq.
Though the results are accurate, is there any alternative for using linebreak
via css to create responsive based web page.
By googling I found the pseudo element. But I didnt get a proper image 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 want to create some spaces among question 1 , 2 and so on.
I have used font class tag , but cannot use Margin .
Should I go for DIV instead of FONT ?

`font` tag is deprecated. Also, if you are using so many `br` tags then you are surely doing something wrong. You need to learn CSS positioning. — Mr. Alien, Sep 25 '18 at 04:16
@LGSon So giving `DIV` for each and every `question ` and `answer` line and setting a `margin ` ? — Anuj, Sep 25 '18 at 04:18
@LGSon Your code looks clean and much organized using `DIV` . Any chance I can mark your comment as Answer? — Anuj, Sep 25 '18 at 04:28
Can't accept comments as answers. Await the given answerer, they might use mine (asked them too), and the duplicate link might be a good reference, so I'm considering close it as well. — Asons, Sep 25 '18 at 04:31
I have added a new part to my answer to show how to do this in your sample :) — Hassan Sadeghi, Sep 25 '18 at 04:48

score 0 · Answer 1 · edited Sep 25 '18 at 04:42

.faqfirstsec {
 margin: 0 0 0 70px;
 background: lightgrey;
  height : 100%;           /* this doesn't do much unless parent has a height */
}

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

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

.faqans {
  margin-bottom: 35px;
}

<div class="faqfirstsec">
  <div class="faqtitle">TITLE</div>

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

Hassan Sadeghi · Answer 2 · 2018-09-25T04:58:17.967

If you wrap your desired text (contains <br/>) in an element with white-space: pre all \ns will render as <br/>.

Also you can use <pre></pre> tag which wrapped your text.

But about HTML, You can do it like this:

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

And its css (excuse me for no snippet or fiddle, I'm typing with my mobile phone and I haven't access to the code tools of stackoverflow's editor):

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

Added part

Now, for your case, only try this:

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

Anji · Answer 3 · 2018-09-25T04:38:43.393

-1

Use

margin-bottom: 100px;
display: block;

for the font tag.

font tag is an inline element and now it is deprecated. Instead of font tag use Div or span.

edited Sep 25 '18 at 04:38

answered Sep 25 '18 at 04:25

Anji

689
1
5
24

@LGSon, Both are the same answers. Why did you added downvote to my answer. – Anji Sep 25 '18 at 04:34
Because you suggest how to use `font` (displayed as block though). `font` is deprecated and shouldn't be used, so an answer with it, is a bad answer. – Asons Sep 25 '18 at 04:35
I was mentioned that font tag was deprecated. – Anji Sep 25 '18 at 04:39
You still refer the given CSS for the font tag. Some users will just try the provided CSS, and as that (still) might work they might keep it and then it suddenly will not, so I suggest you rephrase the answer – Asons Sep 25 '18 at 04:41

Alternative for using CSS

3 Answers3

Alternative for
using CSS