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
Post a Comment