0

I have created a site, where people can come and create their own quiz questions. Later, they will be able to see these questions.

html,
body,
div {
  margin: 0;
  padding: 0;
  font-size: 1.2vw;
  font-family: Arial, sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover,
li:hover {
  background-color: black;
  color: white;
}

.action {
  display: inline-block;
  font: inherit;
  font-size: 1.8vw;
  padding: 0.5% 2% 0.5% 2%;
  background-color: #ffffff;
  text-align: center;
  border-color: black;
  border-style: solid solid solid solid;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  border-width: 0.15em;
  margin: 2% 2% 0% 2%;
}

#content_question {
  text-align: center;
  position: fixed;
  display: block;
  left: 16%;
  right: 34%;
  width: 48%;
  top: 15%;
  bottom: 5%;
}

.question_fields {
  display: inline-block;
  padding: 2% 4% 2% 4%;
  font: inherit;
  color: white;
  text-align: center;
  background-color: black;
  border-color: black;
  border-style: solid solid solid solid;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  border-width: 0.15em;
  font-size: 1.8vw;
  resize: none;
  outline: none;
}

#question {
  width: 90.5%;
  height: 21.2%;
}

.question_fields.answers {
  display: inline;
  width: 40.3%;
  margin-top: 0.5%;
  font-size: 1.5vw;
  background-color: #ea5400;
  color: black;
}

#right_answer {
  background-color: #008000;
}

#source {
  background-color: white;
  width: 90.5%;
}

#create_question {
  display: block;
  margin: 1.5% auto 0% auto;
}

#create_question:hover {
  background-color: black;
  color: white;
}

.show_question_fields {
  display: inline-block;
  font: inherit;
  text-align: center;
  border-color: black;
  border-style: solid solid solid solid;
  border-radius: 0.4em 0.4em 0.4em 0.4em;
  border-width: 0.15em;
  font-size: 1.8vw;
}

#show_question {
  color: white;
  background-color: black;
  width: 98.5%;
  height: 26.2%;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  margin-bottom: 0.3%;
}

.show_question_fields.answers {
  color: black;
  background-color: #ea5400;
  width: 47.8%;
  height: 22.3%;
  margin-top: 0.5%;
  margin-bottom: 0.35%;
  margin-right: 0.35%;
  margin-left: 0.4%;
}

.show_question_fields.source {
  color: black;
  background-color: white;
  width: 98.5%;
  height: 13.6%;
  margin-top: 0.5%;
  margin-bottom: 0.4%;
}

#show_right_answer {
  background-color: #008000;
}
HTML looks like that:


<div id="content_question">

  <div id="show_question" class="show_question_fields">
    <p>
      Question
    </p>
  </div>

  <div id="show_right_answer" class="show_question_fields answers">
    <p>
      Right Answer</br>
      Right Answer Part 2
    </p>
  </div>

  <div class="show_question_fields answers">
    <p>
      Answer 2
    </p>
  </div>

  <div class="show_question_fields answers">
    <p>
      Answer 3
    </p>
  </div>

  <div class="show_question_fields answers">
    <p>
      Answer 4
    </p>
  </div>

  <div class="show_question_fields source">
    <p>
      Source
    </p>
  </div>

  <a href="#" class="action">To Main Page</a>
  <a href="#" class="action">Back</a>

</div>

As you can see, margin-bottom under an answer field is bigger, when the answer consists of two or more lines. That should not be the case.

Can anybody help me fix this issue? I already tried changing margin, line-height and padding, but it won't help.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
sebjel
  • 13
  • 7
  • You need to use javascript, inorder to fulfil! – Smit Mar 02 '17 at 16:32
  • what about `p {margin:0}` and [this](http://stackoverflow.com/questions/42098246/center-text-vertical-in-element-that-changes-height-and-width/42098684#42098684)? – Samuel Kirschner Mar 02 '17 at 16:58
  • it may be your CSS `display:inline-block;` see if it changes when you change it `display: inherit or initial;` – Toxide82 Mar 02 '17 at 17:00

1 Answers1

0

Just add vertical-align: top to your "show_question_fields" class:

.show_question_fields {
  display: inline-block;
  font: inherit;
  text-align: center;
  border-color: black;
  border-style: solid solid solid solid;
  border-radius: 0.4em 0.4em 0.4em 0.4em;
  border-width: 0.15em;
  font-size: 1.8vw;
  vertical-align: top;
}
Fab
  • 4,526
  • 2
  • 21
  • 45