Mysterious Gap between an <img> Tag and a div

My <img> is positioned next to an inline block div, causing some design issues. I attempted to set the <img> to display:block, but that solution breaks the overall layout.

Here is the snippet of HTML code: 

            <img src="./images/Portrait2.jpg">

            <div id="AboutText">
                <h3>ZUG ZUG, ME NOT THAT TYPE OF ORC</h3>
                <p>
                    Me Andrew Benson, I create beautiful designs that catch your eye. Colors evoke emotions and reactions - blue for calmness, yellow for warning, red for urgency. But when I'm not creating, I enjoy gardening and fishkeeping. If you want to know more, reach out via email.
                </p>


               <section class="AboutLists Margin">
                    <h3>FORTE</h3>
                    <ul>
                        <li>Branding</li>
                        <li>Illustration</li>
                        <li>Web Design</li>
                        <li>Packaging</li>
                    </ul>
                </section>
                <section class="AboutLists Margin">
                    <h3>FEATURED</h3>
                    <ul>
                        <li>The Dieline</li>
                        <li>Packaging of the World</li>
                        <li>Scholastic Awards</li>
                    </ul>
                </section>
                <section class="AboutLists">
                    <h3>OTHER MEDIUMS</h3>
                    <ul>
                        <li>
                            <a href="https://www.behance.net/AndrewJBenson" target="_new">Behance</a>
                        </li>
                        <li>
                            <a href="https://dribbble.com/BensonbyDesign" target="_new">Dribble</a>
                        </li>
                        <li>
                            <a href="Public Profilehttps://www.linkedin.com/in/andrew-benson-b209b769" target="_new">Linkden</a>
                        </li>
                        <li>
                            <a href="https://twitter.com/BensonbyDesign" target="_new">Twitter</a>
                        </li>
                    </ul>
                </section>
            </div>

        </div>
    </section>

This section includes the relevant CSS styles:

hr{
border: 2px solid rgba(190,190,190,1.00);

margin-bottom: 15vh;
margin-top: 10vh;
margin-left:2%; 
margin-right:2%;
}

#AboutText hr{
text-align: left;
width: 10%;
}

#About{
overflow: hidden;
margin-left:2%; 
margin-right:2%;
clear: both;

margin-bottom: 160px;
}

#About img{
width:30%;
height: auto;
vertical-align: top;
}

#AboutText{
width: 60%;
display: inline-block;
}

#AboutText h3{
font-family: 'Lato', serif;
font-weight: bold;
font-size: 11pt;
letter-spacing: 2px;
color:rgba(190,190,190,1.00);

margin-bottom: 20px;
}

#About p{
line-height: 30px;
font-family: 'Lato', serif;
font-weight: thin;
color:rgba(80,80,80,1.00);

margin-bottom: 135px;
}

.AboutLists{
display: inline-block;
vertical-align:top;
}


.AboutLists.Margin{
margin-right: 10%;
}

.AboutLists h3{
font-family: 'Lato', serif;
font-weight: bold;
font-size: 11pt;
letter-spacing: 2px;
color:rgba(190,190,190,1.00);

margin-bottom: 20px;
}

.AboutLists li{
line-height: 30px;
font-family: 'Lato', serif;
font-weight: thin;
color:rgba(80,80,80,1.00);

text-decoration: none;
}

.AboutLists a{
color:rgba(80,80,80,1.00);
text-decoration: none;
}

To see this issue in action, visit my test page's about section at:

cssimagespacing

Answer №1

To eliminate that empty space, simply apply the float: left property to the #About img element.

Answer №2

The issue with the gap is a result of using an inline-block element. To fix this, one solution is to set the font size of the container to 0. Here's how you can do it:

#About{
 font-size:0;
}

After that, remember to specify font sizes for the text within this section.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting font size in dynamic containers relatively

Imagine we have a slider named .outer, which adjusts its height based on the width of the viewport. Inside this slider, there is an example slide called .inner that contains some text. However, when we shrink the window width, the content in slide .inner s ...

javascriptjqueryhtmlcss

Troubleshooting problems with spacing in CSS flexbox due to the gap property

Having some trouble with flexbox. The gap property is making the columns too wide when trying to create a simple 3 column row. I was under the impression that the gap value should not affect the width set. For example, using flex: 0 1 33.33% and gap 2rem ...

cssflexboxgrid

The text is not displaying correctly in the HTML format

Here is a snippet of text that I'd like to maintain the original layout for: <p> We recently reduced the number of savings accounts we offer. I welcomed this because I think members find it confusing to look through tables of lots of slightly ...

javascriptjqueryhtmlcss

Safari re-downloads background image when revisiting with jQuery CSS

Using jQuery to set a background-image on my website: $('.header-image').css('background-image', 'url(/img/image.jpg)'); However, upon returning to the page from Safari, the image is downloaded again, unlike Chrome and F ...

javascriptjqueryhtmlcsssafari

Achieving vertical center alignment of an element using CSS

I have been attempting to vertically center the content within my div. Here is the HTML code: <div id="header"> <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="logo-img-div"><img id="logo-img" src="logo.png"></div> ...

htmlcss

What is the best way to adjust the placement of an Icon component when it is nested within a Tab component?

Incorporating MaterialUI's tabs into my React project has been quite a task. Here's the JSX code for the tabs: <AppBar color="default" position="static"> <Tabs indicatorColor="primary" textColor="primary" value={tabIndex} onChan ...

cssreactjsmaterial-ui

Utilizing jQuery to add a class to an element when a different one is hovered above

I'm currently working on implementing effects on the edges of a webpage that will be triggered when a central div is hovered over. The main tool I'm using for this task is jQuery. Despite my efforts to diagnose the issue by using alerts in my Ja ...

javascriptjqueryhtmlcss

A visually stunning image showcase with dynamic resizing and strategically placed white spaces using the m

I'm attempting to create a responsive image gallery using the Masonry jQuery plugin, but despite reading numerous articles and forum posts on the topic, I can't seem to get it to work properly. The gallery is displaying many blank spaces. My app ...

javascriptjqueryhtmlcssjquery-masonry

What could be causing my font to not display properly in IE11 despite applying this CSS rule?

The CSS code I have is working correctly in Chrome and Firefox, but it doesn't seem to be displaying properly in IE11. The CSS is being imported from an external node module, so making direct changes to it might be problematic. Any thoughts on how to ...

cssnode.jsreactjsnode-modules

Prevent fixed div from overlapping with footer

I have been trying to find a solution for my fixed div that sticks to the bottom, but nothing seems to work. My goal is to have the div stop when it reaches the #footer section of the page. Visit the site The CSS currently in place gives the div the cla ...

jqueryhtmlcss

Styling Angular with FullCalendar - Personalized CSS Design

I'm struggling with custom styling using FullCalendar for Angular. Specifically, I need to change the background color of the 'More Events' Popover, but no matter what I attempt, my styles aren't taking effect. I've been trying to ...

cssangularfullcalendar

the recurring pattern of media conditions in every single column

Hello, I'm currently involved in a project where I have implemented media conditions for my columns using Sass. Here is the code snippet: // Mobile media - 320px width @mixin mobile{ @media only screen and (max-width:767px){ width: 300px; } } B ...

csssass

The CSS Custom Properties for the IonInput component failed to apply to the helper text

I have encountered an issue with CSS Custom Properties not affecting the helper text. Despite trying to change the color of the helper text, it remained unchanged. Is there a workaround or method to define Custom Properties specifically for helper text? Th ...

cssionic-frameworkvuejs3ionic7

Utilizing CSS3 transform to rotate text within a bar graph design

Although there are numerous inquiries regarding rotating text using CSS, I have attempted to implement the suggested solutions to my issue without success. The objective is to design a bar graph, but in certain scenarios data points may be missing. The de ...

css

CSS: width is functional but height is ineffective

When trying to adjust the width of a div, everything works smoothly, but the same cannot be said for adjusting the height. I attempted to experiment with the bootstrap carousel on codeply, but unfortunately, it didn't behave as anticipated: HTML code ...

htmlcssbootstrap-5

When it comes to adjusting the height of an element, there are two ways to go about it: using $(element).height

function adjustHeight(){ var headerHeight=$(element).find('.header').outerHeight(); console.log(headerHeight); var temp=$(window).height()-headerHeight; console.log(temp); $('.users ...

javascriptjqueryhtmlcss

Using JavaScript to animate a background composed of SVG shapes

My code is successfully adding an svg background with js and rotating it using set interval. It works perfectly on Chrome, but not on any other browser. Any suggestions on how to make it work universally? let i = 0; setInterval(() => { document.b ...

javascriptcsssvgjquery-animate

The menu is about to receive some custom styling

I have come across a webpage where I need to make some modifications, but I am unable to locate the script responsible for applying the inline style. This issue only seems to be occurring on the mobile version with the dropdown menu. <div class="is-dri ...

javascriptjquerycssmenu

Slanted lines HTML CSS

I am encountering an issue with my HTML and CSS coding. The design requires a zig-zag "border" at the top and bottom of the page, creating a white paper space in between. The paper needs to be positioned underneath the zig-zag borders. Currently, this is ...

htmlcssborderzigzag

How can I position two spans vertically between two floating divs using CSS?

On the top of my page, I have two divs - one floated to the left and one to the right. I successfully placed text with border between them. Now, I am facing the challenge of stacking two areas of text between these two divs. You can see an illustration of ...

htmlcss-floatquirks-modecss