'Is there any specific way to set padding and margins? [closed]

I'm a beginner in CSS and I wanted to test my skills, so I took up some projects to build basic websites purely from css and html. However I often got stuck in places, especially when setting up margins, padding, height etc.

How do I determine the exact values of the margin, padding etc.? Is there some mathematical calculation that people do or do you just put in random values and check if they work?

Answer So, a couple of things I think should be followed when setting paddings/margins:

  • use values such as percentages(%), rems, ems and other responsive values to make sure you're not creating a page with fixed pixels which overflow on mobile devices. You can check this link

  • understand how box-models work, since they are essential for working with margins and stuff. Here is a diagram for better understanding. Even the dev tools of most browsers show the box model of the selected element. enter image description here

  • it's worth learning about flex/grid (at least it helped me out a lot), because they make creating layouts so much more easier.

  • margin-left: auto; and margin-right: auto; may be useful on their own too - you don't have to automatically set all margins.

  • I tried this out and it really, really helps: make a design or layout of the entire website before writing code. Many people have a designer, so that's great but I often just went on writing different values for margins and padding, hoping one of the values would work. So, making a layout before writing code might be helpful.

htmlcss


Solution 1:[1]

People use graphic site designs and build css based on them. Margin and padding are usually set in bulk for the tag. A good example might be material design

I recommend using the already mentioned

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 OtiK.cz

Related Questions