Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Setting margin and padding

Hi everyone. İn the videos teachers set the exact margin and padding to elements, however i try 1000 times and got correct margin or padding at 101th one :D can you tell please, how do you do it from the first time? how do you know the correct margins and paddings? Thanks.

2 Answers

Hi Javid,

The teachers have experience on their side as well as having thoroughly prepared their lessons beforehand. As such, you don't necessarily "see" the times they have not got it perfect.

When building a website for a client/employer, you will often have an approved design to work from which should indicate the dimensions required. Established brands/websites will often have a Corporate Identity to work from which will indicate the required sizes, colours, fonts etc.

In the end, it is a combination of practice, experience, the requirements of the design as well as a sense of what works on which size screen. The more you design and code, the easier it will get.

Hope that helps!

Yeah, Nicholas pretty much nailed it. Teachers are using something they've created beforehand to teach you with, it's not something they're creating on the fly. Everything I've ever created started out with a guess (or some visual I've memorized by doing it so much). As an example I know that this box shadow or border radius looks awesome to me... but it's just something I've done 1000 times.

box-shadow: 0 0 10px black;
border-radius: 15px;