Can you identify the missing piece in my design?

#container {
    width: 250px;
    margin: 0 auto;
}

.group {
    border: 1px solid grey;
    margin-bottom: 20px;
}

.group p {
    text-align: center;
    font-family: Helvetica sans-serif;
    font-size: 25px;
    color: #2e3d49;
}

.group img{
    width: 100%;
}
<div id="container">
  <div class="group">
    <p>Hello World</p>
    <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg">
  </div>
</div>

When you run the code snippet, you may notice a blank space at the bottom of the image. What is causing this extra space to appear?

htmlcssimage

Answer №1

the img element is set as an inline element, so you can either change it to display:block or adjust the vertical-align:baseline property by setting it to vertical-align:bottom

#container {
  width: 250px;
  margin: 0 auto;
}
.group {
  border: 1px solid grey;
  margin-bottom: 20px;
}
.group p {
  text-align: center;
  font-family: Helvetica sans-serif;
  font-size: 25px;
  color: #2e3d49;
}
.group img {
  width: 100%;
  display: block;
  /* vertical-align: bottom  - would work as well */
}
<div id="container">
  <div class="group">
    <p>Hello World</p>
    <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg">
  </div>
</div>

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

Footer to display exclusively on the final printed page's bottom

I am facing an issue with my certificate template. It contains dynamic content in the header, body, and footer sections. When printing a single page, everything looks fine. However, when printing multiple pages, the footer does not display at the bottom of ...

htmlcssprinting

How can I import the raw JSON data from a table into a pandas DataFrame?

I am attempting to extract the JSON data and convert it into a dataframe from: "" , which is the original data displayed in a table at the bottom of this page "" The content on the JSON page seems to be basic JSON data like"[{\"SECURITYCODE\":& ...

pythonhtmljsonpandasdataframe

Python web scraper unable to locate specified Xpath

My question was previously posted here: Xpath pulling number in table but nothing after next span In testing, I successfully located the desired number using an XPath checker plugin in Firefox. The extracted results are displayed below. Although the XPa ...

pythonhtmlseleniumxpathselenium-webdriver

Ensure to verify the presence of a null value within the ngFor iteration

I have a webpage where I am displaying information in buttons. These buttons show various objects from a list along with their corresponding fields (e.g. object.name, object.age, etc.). Sometimes, one of those fields is null. How can I check if a value is ...

javascripthtmlangularjsangular

Ways to dynamically adjust the color of the text font?

Below is the XML content: span style="background-color: rgb(255, 255, 0); The background color mentioned here is linked to my Java code. Since this color changes dynamically, it varies in each report. My inquiry is about how to incorporate this color in ...

htmlcolorsjasper-reportsireport

Issue encountered while determining the specificity of a CSS selector involving pseudo-classes

As I delved into a tutorial on MDN, an intriguing code snippet caught my attention: /* weight: 0015 */ div div li:nth-child(2) a:hover { border: 10px solid black; } An unanswered question lingers in my mind: Why does this rule's specificity displa ...

htmlcsspseudo-classcss-specificity

Retrieve the chosen item from the autocomplete feature

Unfortunately, I have encountered an issue with this solution as I was unable to get it to work correctly in my code. The objective is to retrieve the selected item and then call another function to utilize it. The script is as follows: <script type=" ...

javascriptjqueryhtmljson

Arrange a row of fifteen child DIVs in the form of bullets at the bottom of their parent DIV

Currently, I am working on customizing a slider by adding bullets. My goal is to create a gradient background for the parent div containing these bullets. However, when I try to increase the height of the parent div, all the bullets align themselves at the ...

htmlcss

What is the best way to symbolize a breadcrumb offspring?

In my table representation, the breadcrumb is shown as: <ol class="breadcrumb" data-sly-use.breadcrumb="myModel.js"> <output data-sly-unwrap data-sly-list="${breadcrumb}"> <li itemscope itemtype="http://data-vocabulary.org/ ...

javascripthtmlbreadcrumbssightly

I'm looking for a method to trigger onChange() specifically on Internet Explorer using only JavaScript, HTML, and CSS without relying on jQuery

Looking for a way to utilize onChange() only on Internet Explorer using Javascript, HTML, CSS (No Jquery). My current code successfully sends the input to my function upon onChange(), but it seems to work smoothly on Chrome and not on IE. Is there a meth ...

javascripthtmlcss

How can I change the text color in a QTextBrowser using HTML in PyQt?

I've been attempting to customize the font color of HTML text within a created QTextBrowser. While I have successfully used basic HTML commands to adjust paragraphs and change font size, I am facing difficulties with setting font color. Below is the ...

htmlcsspyqtpyqt4qtextbrowser

What is the process for customizing the image size of a WordPress RSS feed in pixels?

Is there a way to customize image sizes beyond the 'thumbnail', 'medium', and 'large' options? I tried setting width and height in the <img> tag within an RSS file, but it didn't work. Could it be a nested quotation ...

csswordpressimagersssize

If the item has an active class, apply a new class to the parent element and all of its

If I have code like the example below and want to add the show class to the parent and ancestors. // The last `nav-item` has the `active` class <div class="nested-group nested-item show"> <div class="nested-item show"> <div class="n ...

javascriptjqueryhtmlcss

CSS :hover triggers when hovering AROUND the div element instead of directly OVER it

I'm encountering a subtle yet bothersome issue: I'm attempting to incorporate a "Close" button using CSS image replacement. The HTML code is as follows: <div id='close' title='Close'> <a href='#'> ...

csshoverimage-replacement

Troubleshooting Problems with Cascading Style Sheets

Struggling with a layout issue on my website. I need to display an image with text at the beginning of the site-wrap div under the name background-image, with the text inside that div. Adding line-height to the text div adjusts its height, but I want to m ...

htmlcss

What adjustments can I make to my smooth-scrolling JavaScript code in order to exclude my Bootstrap Carousel from the scrolling

On my website, I have incorporated JavaScript to create a smooth-scrolling effect when a user clicks on a hyperlink. This feature is essential as the landing page includes a chevron-down icon that prompts the user to navigate to the next section of the pag ...

javascripthtmltwitter-bootstrapbootstrap-4

CSS not aligning email header correctly

I have been given the task of coding an HTML email for mailing campaigns. I have managed to get everything working, except for a particular piece of code. What I am trying to accomplish is having an image with other elements on top such as titles, a button ...

htmlcssemailoutlook

Setting objects in parallel in HTML involves using the display property along with the value

Creating two sign-up forms using HTML and CSS Bootstrap. Want them to be parallel, tried using the position tag but there is unwanted space created between the forms. View the output How can I prevent this circle of space from being generated? <main cl ...

htmlcsstwitter-bootstrap

Utilizing AJAX to dynamically update a div's content by extracting a specific div from the retrieved data

Although I believe my code is correct, I am not very familiar with AJAX and have been struggling for hours to get it right. I've tried various approaches, including using filters, but nothing seems to work. The issue I'm facing is that the chat m ...

javascriptjqueryhtmlcssajax

Having trouble loading CSS in an express view with a router

I am encountering an issue where I am unable to load my CSS into a view that is being rendered from a Router. The CSS loads perfectly fine for a view rendered from app.js at the root of the project directory. Below is my current directory structure, node_ ...

javascriptcssnode.jsexpress