Use padding, paddingXY and paddingEach with elm-ui
Since we mentioned in a previous lesson that there is no concept of "margin" in elm-ui, we are goint to learn how to se padding, paddingXY and paddingEach to compensate for that, and a little trick defining a value edges that is going to be pretty useful.
Instructor: [0:00] You might remember that we mentioned before that there's no concept of margin in Elm-UI. You already are familiar with padding, which gives the same amount to the four different sides, top, bottom, left, and right.
[0:13] We're going to go to our breakdown button, and we want to make it a bit more special. We're going to say paddingXY. We're going to say 20 for the x-axis and for the y's. You notice that now it's centered.
[0:28] With padding we effect the four sides. With paddingXY we can affect two sides at the same time. What happens if we want to be more custom since we don't have margins and the only thing we have is spacing and padding?
[0:41] We're going to do a little trick. We're going to say edges, and we're going to give it top = , right = , bottom = , and left = . We're going to Int for the annotation. Now we're going to say paddingEach, we're going to pass edges. We're just going to modify and say that we want the left to be 20 and the top to be 30.
[1:08] This way, we can handle all possible cases and we can use our edge trick, and you will notice that you won't miss having margins at all. Padding and spacing is all we need.