Removing the gap between html elements in question text | XM Community
Skip to main content
Hi everybody. I've got something like this HTML in a Qualtrics question:

`<img src="https://www.gstatic.com/webp/gallery/1.jpg" style="width: 556px; height: 273px; `

`padding-bottom:0px; margin-bottom:0px; border:1px solid black;">`

`<br><div style="margin-top:0px; padding-top:0px; border:1px solid black;">Text</div>`





My goal is to have _no gap_ between the image and the text. It looks fine while editing the Qualtrics survey, but when "Previewing" the question, there is a gap of about, say, 10 pixels. I want to remove it.



I suppose it's CSS associated with the Qualtrics theme -- perhaps a margin or padding somewhere?. I've tried different themes, but nothing gets rid of it. Is there some custom CSS I could add somewhere (presumably as a preamble to that question's HTML because I'm after only a localized change) to get rid of that gap?
Hello @ederosia ,



The gap is because of the line-height property given to question text. Hence to need to adjust the line height as required using below code. Change the value 0.9 as per your requirement



`jQuery("#"+this.questionId+" .QuestionText").css("line-height", "0.9em");`
> @Shashi said:

> Hello @ederosia ,

>

> The gap is because of the line-height property given to question text. Hence to need to adjust the line height as required using below code. Change the value 0.9 as per your requirement

>

> `jQuery("#"+this.questionId+" .QuestionText").css("line-height", "0.9em");`



Very helpful. Thank you! It weirds out the rest of the text in the question, but I can compensate for that with some code for each bit of text. Thanks again!

Leave a Reply


Terms & Conditions