Padding and margin



Whenever you define a device class to a component is becomes a Bootstrap component. Alle Bootstrap elements have a padding and margin by default, the is set in the used bootstrap theme. As padding and margin generates a space around the element, you need to be sparse in using them. For instance if you have a padding/margin on a row, column AND field then you will create a very open structure with a lot of white-space that occupies a lot of screen space. That is why PHsPeed does not automatically applies a device class to a field. But you can apply the size of the padding and/or margin.  But first, what is the difference? The image here explains all. But how to set the individual padding and margin? Well Bootstrap uses p- and m- syntax for that. Whenever you have an individual property then you can open up the property editor:



The property editor will create a valid statement for m or p.

First margins can be set on all directions. If you need a margin on top and at the bottom, then you can add a second rule by clicing the +



In this example it displays a negative margin for the top (mt) and a positive/neutral for the bottom.

The same story applies to padding, it uses the same property editor.