Materializecss: image without margin

Asked

Viewed 401 times

2

I have an image inside a div. Down she gets a margin. I tried with Firebug to look at the code of div and img, but I found nothing stated with margin and padding. 

<div class="row">
    <div class="col s4">
        <img  class="responsive-img" src="imagem/IMG_8380.jpg" alt=""/>             
    </div>
    <div class="col s4">
        <img  class="responsive-img" src="imagem/IMG_8265.jpg" alt=""/>
    </div>
    <div class="col s4">
        <img  class="responsive-img" src="imagem/IMG_8711.jpg" alt=""/>
    </div>
</div>

inserir a descrição da imagem aqui

css materialize

3 answers

1

Friend to class row of Materialize by default has a margin-bottom of 20px , to solve this just create a class with the name .no-margin and leave her with margin: 0 !important;, so whenever you want a div row no margin just add like this:
HTML:

<div class="row no-margin">
    <div class="col s4">
        <img  class="responsive-img" src="imagem/IMG_8380.jpg" alt=""/>             
    </div>
    <div class="col s4">
        <img  class="responsive-img" src="imagem/IMG_8265.jpg" alt=""/>
    </div>
    <div class="col s4">
        <img  class="responsive-img" src="imagem/IMG_8711.jpg" alt=""/>
    </div>
</div>

Css:

.no-margin {
    margin: 0 !important;
}

  • It didn’t work @Bruno Romualdo is still showing the margin. You have some idea?

  • It has how to put the code in some Jsfiddle is easier to see and fix the problem.

0

I believe that the problem is not in the images, but in the divs.

Create a class .no-margin in his <style> and add her to div mother. Nas divs daughters you add to class .no-padding native of Materialize:

<style>
.no-margin{
   margin: 0;
}
</style>

<div class="row no-margin">
    <div class="col s4 no-padding">
        <img class="responsive-img" src="imagem/IMG_8380.jpg" alt=""/>
    </div>
    <div class="col s4 no-padding">
        <img class="responsive-img" src="imagem/IMG_8265.jpg" alt=""/>
    </div>
    <div class="col s4 no-padding">
        <img class="responsive-img" src="imagem/IMG_8711.jpg" alt=""/>
    </div>
</div>

0

The simplest way to solve this, if you haven’t tried yet, is to go in your own stylesheet and set a margin=0 for the figure. It seems to me that the margin may be coming from both the "Responsive-img" class and the "Row" or "col S4" class, so it is worth trying to manually remove the margin from each of them.

Browser other questions tagged css materialize

You are not signed in. Login or sign up in order to post.