locked
Why do I get empty space between two div RRS feed

  • Question

  • User1444011213 posted

    Hi,

    Why am I getting empty space <g class="gr_ gr_37 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="37" data-gr-id="37">betwen</g> this 2 div (i put yellow so it can be easier to seen)

    <div style="margin: 0px; padding: 0px; background-color: yellow;">
    <img src="https://images.unsplash.com/photo-1456659122552-6ee1788174bb?ixlib=rb-1.2.1&w=1000&q=80" style="width: 100%;"/>
    </div>
    <div style="margin:0px; padding: 0px; background-color: green;">
    text
    </div>

    Tuesday, December 25, 2018 7:51 AM

Answers

  • User-1174608757 posted

    Hi Domagoj Skledar,

    According to your description ,I have made a sample here .I suggest you to set image style="display:block" to make the image to be modular.So,the space between div and image could be disappeared by setting margin and padding. Here is the demo,I hope it can help you .

    div.aspx:

    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div style="margin: 0px; padding: 0px; background-color: yellow;">
    <img style="display:block" src="../images/naslovna.jpg" />
                </div>
    <div style="margin:0px; padding: 0px; background-color: green;">
    text
    </div>
        </form>
    </body>

    It shows as below:

    Best Regards 

    Wei Zhang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 26, 2018 5:55 AM

All replies

  • User-474980206 posted
    It appears the image has a built-in transparent footer. Try a different image or crop it.
    Tuesday, December 25, 2018 5:36 PM
  • User1444011213 posted
    I tried with couple of jpg photos, they do not have transparency
    Tuesday, December 25, 2018 6:04 PM
  • User1693814044 posted

    the regular default line-height creates a baseline that is slightly above the bottom boundary of the div. this is to leave room for text character descenders  (such as with lower-case j) to still fit and not get clipped.  Inline elements such as your img will sit on that baseline and so you end up with a small gap. 

    add line-height:0px to the container div

    <div style="line-height: 0px; margin: 0px; padding: 0px; background-color: yellow;">

    Wednesday, December 26, 2018 1:21 AM
  • User-1174608757 posted

    Hi Domagoj Skledar,

    According to your description ,I have made a sample here .I suggest you to set image style="display:block" to make the image to be modular.So,the space between div and image could be disappeared by setting margin and padding. Here is the demo,I hope it can help you .

    div.aspx:

    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div style="margin: 0px; padding: 0px; background-color: yellow;">
    <img style="display:block" src="../images/naslovna.jpg" />
                </div>
    <div style="margin:0px; padding: 0px; background-color: green;">
    text
    </div>
        </form>
    </body>

    It shows as below:

    Best Regards 

    Wei Zhang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 26, 2018 5:55 AM
  • User1444011213 posted

    <g class="gr_ gr_36 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="36" data-gr-id="36">Unfortunately</g> this <g class="gr_ gr_27 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="27" data-gr-id="27">do</g> not help, but thanks for answer

    Wednesday, December 26, 2018 8:17 AM
  • Wednesday, December 26, 2018 8:22 AM