What is the difference between margins and padding?

You'll be coming across the concepts of margins and padding if you want to adjust them using CSS to give your survey or personalized PDF report a custom look.


Margins and padding are not the same!


The page margin is the actual value in mm between all content and the edge of the sheet. Changing the margin affects how far one element is to another element.


The padding per page is the distance between the margin and the content. Padding changes take place inside an element and changing the padding will cause a change in how far the content is from the border.


The difference between the page margin and page padding is illustrated here:



How do I use CSS to set the margins?

When coding margins in CSS, the order of margins is: top, right, bottom, left. So if you want to specify margins of 45 pixels on the top, 60 pixels on the right, 45 pixels on the bottom and 70 pixels on the left, here is the CSS code you would use:


p {
 margin: 45px 60px 45px 70px;
}


You could also use the code margin:auto to center an element within its container. Note that there is not an equivalent of this type of coding for padding.


How do I use CSS to set the padding?

To adjust the padding, the CSS coding works in the same way as for margins. Simply replace the word margin with padding, so your coding may look like this:

p {
padding: 15px 30px 20px 45px
} 


Using CSS in Survey Anyplace

There are 2 places where CSS can be uploaded - to change the format of the survey itself, or to make layout adjustments to the personalized PDF report.


CSS in the survey

Head over to the Design tab and scroll down on the right hand side to Custom CSS options. Simply click Add custom CSS file and you'll be able to upload your CSS file from your device. For more details, and lots of examples, read the Custom CSS help guide.


Margin & padding - CSS


CSS in the PDF report

To adjust the layout of the PDF report, click on the Design tab and scroll down to Custom CSS. Just start typing in the CSS editor! Make sure to click Save and Test PDF when you're done to save your changes and get a preview.


Margins & padding PDF report



V
Vincent is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.