Materializecss: image without margin

Question

Materializecss: image without margin

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

2

I'm having an image inside a div . At the bottom it gets a margin . I tried Firebug to look at the code for div and img , but I did not find anything declared 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>

css materialize

asked by anonymous 14.10.2017 / 00:55

3 answers

Difference between std :: map, std :: unordered_map, std :: flat_map, and which one to choose? Return Json in Array instead of Object

score 1 · Answer 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 it with margin: 0 !important; , so whenever you want a row div % without margin just add so:
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;
}

score 0 · Answer 2

The simplest way to solve this, if you have not tried, is to go in your own stylesheet and set a margin = 0 to the figure. It seems to me that the margin may be coming from either the responsive-img class or from the row or col4 class, so it's worth trying to manually remove the margin from each of them.

score 0 · Answer 3

I think the problem is not in the images, but in div s.

Create a class .no-margin in its <style> and add it to div mother. In the% s of% s daughters you add the native% class 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>