-2

I am always confused which one I should choose whether margin or position(relative, absolute) in making a web page responsive.

For example , I have an HTML element , now to align it properly, I can go for either margin/padding or Position, but I always think that which will be better to use so that I don't have to write lot of media queries for different devices .

Any help/advice is aprreciable !!!

shreyansh
  • 1,427
  • 4
  • 21
  • 39
  • this will help you http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css – shyamm Dec 19 '16 at 07:52

3 Answers3

1

Each property has their own usecase. but in responsive perspective i feel padding would help more like in some case you simply give padding instead of element height and width.

Position/margin relative/abs is completely depends on requirement. after that you can use % and em as well.

vijay singh
  • 71
  • 4
1

for me, position absolute and using top left or etc is troublesome, especially you will do the floating things between 2 div/section like my post here:

The never answered question

same does with margin and padding, you should know your own width and height divs, but it will too complicated when you turn into a responsive, you should set your width and height again.

the best thing to do responsive website i think you should follow the website structure. keep inside the wrap div or section.

in order to create the mobile view or responsive design you need the great media queries order, it help you to fit with a regular screen device like(iphone 5, 6 or ipad) but you have to consider that now market is in android. and android phone growing so fast and you can't learn what the resolution is(you won't update your media queries over time right?).

  1. bootstrap it typeless but it only 12 grid system which you can't manage a navigation with 7 menu, you should modify it by yourself.
  2. flexbox flexbox is good, you can maintain your container and you don't need to do using float and clear both.

like i said, it depends on your media queries. it's not about position or margin/padding, it's about everything in css.

if your question is only all about alignment, you can start using display flex with justify-content and align-items in parent div or section, this way you won't bother with what is your parent div's width and height.

cheers, might it help to understand :)

Community
  • 1
  • 1
Obink
  • 249
  • 1
  • 12
0

Position is not better for responsive design. It is useful but not recommended to use in place of margin/padding.

For example when you use position:absolute; on an element it takes that element out of normal content flow and adjusts its position only according to it's relative positioned parent element. If you use it too often, it is gonna create problems for you.

And responsive design is about using float

In short position is not to be substituted formargin/padding.

ab29007
  • 7,170
  • 2
  • 14
  • 42