0

I'm having a challenge with hanging indents and linebreaks. the essential effect I want is:

Q: Question
A: Answer

Q: Question
A: Answer

For each question and answer, I want a hanging indent:

p.hang { margin-left: 1in; text-indent: -0.25in }

That way if a question or answer wraps to the next line, it will not go to the left margin but line up under Question or Answer. It's working ok for the Q: part but not A.

To keep the Q & A as one block, I'm using <br /> instead of </p> so there's no gap. I've tried defining

ans { position: relative; margin-left: X }
X has been some negative number using px, pt or inches

and using it as a span on the answer portion but to no avail.

Here's the full code of a typical block right now:

<p class="hang">
      Q: Should I have a baby after 35?<br />
      <span class="ans">A: No, 35 children is enough.</span>
    </p>

Is there any way around this? Whoever devised this original premise of a blank line between paragraphs should be shot.

3
Contributors
3
Replies
4
Views
9 Years
Discussion Span
Last Post by dwlamb_001
0

use <br><br> between 2 QA block or another way is using one blank <div></div> with some style between two QA block.

0

This seems to work fine for me (Opera):

<html>
  <head>
    <title>Hanging indents..</title>
    <style type="text/css">
      p.question, p.answer
      {
        margin-left:1.2em;
        text-indent:-1.2em;
        padding-bottom:0;
        padding-top:0;
        margin-top:0;
      }
      p.question
      {
        margin-bottom:0;
      }
      p.answer
      {
        margin-bottom:1em;
      }
    </style>
  </head>
  <body>
    <p class="question">Q: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="answer">A: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="question">Q: etc...</p>
    <p class="answer">A: etc....</p>
    <p class="question">Q: etc...</p>
    <p class="answer">A: etc....</p>
  </body>
</html>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.