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.


CSS is a computer language that allows you to change many elements of your design (e.g., make answers larger, make buttons out of links, etc.) that are not included in the Design tab.


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 from 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:


difference page margin and padding


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

CSS helps you recreate your company's branding entirely to make the survey or the PDF report match and will therefore enable customers to immediately identify the survey or the PDF report with your company.


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


Survey Anyplace is not only available for desktop or laptop; it’s also available on many other platforms and devices! Because of this, layouts with custom CSS can differ on other screens.


To make the survey adjustable to multiple screens, it is advised to use @media-query.

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.