How are the elements positioned vertically now?

Question

css

I apologize for the noob question. Made up for a very long time - it was my hobby. Now I decided to do it again.
In what way is it now customary to position elements vertically among themselves?
Let's say the markup is given:

<div>
 <img href="">
 <h2>text</h2>
 <p>paragraphe</p>
</div>

You need to set the vertical distance between the img, h2 and p elements. How are they doing it now? Thank you very much in advance.

Answer 1

In this case, it will be very convenient to position through flexboxes, but you need to rotate the main axis.
1) Set the parent, in this case the div display: flex;
2) Rotate the main axis with flex-direction: column;
3) Set the content alignment justify-content: space-around or justify-content: space-around;
space-around indents the top and bottom, and space-between pushes the outermost elements to the edges of the parent
4) Since we have rotated the main axis, we can set the horizontal centering through align-items: center;
Done :)
Example - https://codepen.io/you_web/pen/JveOQM
This implementation is good because no matter how many elements you bring into the parent flex container, they will automatically align

Answer 2

Fixed padding between blocks was always set using margin .

h2 {
  margin-bottom: 24px;
}

Answer 3

Hi. read also this article: https://habr.com/post/340420/

Answer 4

Personally, I tend to go for 2 ways:
1. Single-sided margin
https://csswizardry.com/2012/06/single-direction-m... 2. Predominantly
using lego padding.
You can read here or here .