Css, divs gets squeezed when used margin
https://codepen.io/SirYido/pen/WNqLjGK | when i use margin on the class of divs (.barBtns) they get squeezed up. why is that happening and how can i stop this, am i doing something wrong?
5 Replies
1st i think you made a mistake and use the same class for each button and the wrapper of those buttons. But to answer your question they get squeezed in because you have set a fixed width on the wrapper
try to avoid fixed widths and heights on bigger elements use padding instead or set min-width but be careful with this one to
I've set up a more efficient way to do the same thing but no ids, just classes, https://codepen.io/flyingfishdesign/pen/yLdGbGB?editors=1100
As Mannix has already said, you ahve given the buttons the same class as their wrapper so things get confusing and, inevitably, break.
You have also over complicated your CSS. You don't need to define widths and margins.
I would change the HTML to this:
and reduce the CSS to somthing like this: