html - Margin-bottom not working correctly in responsive design -


i have odd problem in using margin-bottom in class responsive design. example

html

<div class="space-bottom"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque commodo sollicitudin molestie. in lacus purus, posuere non lacus eu, pharetra suscipit arcu.</p> </div> 

css

.space-bottom{margin-bottom: 10px} 

the class "space-bottom" margin bottom of 10px not work in mobile device. if insert in media query weird. when change "class" "id"

html

<div id="space-bottom"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque commodo sollicitudin molestie. in lacus purus, posuere non lacus eu, pharetra suscipit arcu.</p> </div> 

css

#id space-bottom{margin-bottom: 10px}  

it seems work. don't need insert attribute inside media query

there no issue css in first example; may noticing margins <p> element , <div> collapsing, based on browser's default margin <p>.

see mozilla developer network's page on collapsing margins more information on feature.

also, css in second example incorrect; should selecting <space-bottom> element id id. why works, or seems work, mystery me.


Comments

Popular posts from this blog

javascript - Count length of each class -

What design pattern is this code in Javascript? -

hadoop - Restrict secondarynamenode to be installed and run on any other node in the cluster -