Padding provides varying padding for the top and bottom sections

html {
  font-size : 10px;
  }
body {
  text-align : center;
  color       : #9da8c1;
  font-family : sans-serif;
  background  : #013f81;
  }
h1 {
  font-size: 4rem;
  }
#img-div {
  background : #2a5590;
  width      : 600px;
  margin     : 0 auto;
  padding    : 10px;
  }
#conway-photo {
  height : auto;
  width  : 500px;
  }
figcaption {
  font-size  : 1.5rem;
  background : red;
  }
<main id="main">
  <h1 id="title">John Horton Conway<h1>
  <figure id="img-div">
    <img id="conway-photo" src="https://static01.nyt.com/images/2020/04/18/obituaries/14Conway1/14Conway1-mediumSquareAt3X-v2.jpg"</img>
    <figcaption>J.H.Conway holding a model of polyhedron</figcaption>
  <figure>
</main>

I am trying to adjust the padding in the figure tag of my HTML code to ensure that the text and image are equidistant from the border. However, I am encountering an issue where there is more space at the bottom than at the top, and there is a noticeable jump in spacing when switching between padding values. Any insights on resolving this problem would be greatly appreciated.

htmlcss

Answer №1

Your HTML tags were not properly formatted, please ensure to validate your code with an HTML Validator tool such as https://validator.w3.org/.

I have corrected the HTML code for you, and it seems to be functioning as intended:

html {
font-size: 10px;
}

body {
text-align: center;
color: #9da8c1;
font-family: sans-serif;
background-color: #013f81;
}

h1 {
font-size: 4rem;
}

#img-div {
background-color: #2a5590;
width: 600px;
margin: 0 auto;
padding: 10px;
}

#conway-photo {
height: auto;
width: 500px;
}

figcaption {
font-size: 1.5rem;
background-color: red;
}
<html>
<main id="main">
<h1 id="title">John Horton Conway</h1>
<figure id="img-div">
<img id="conway-photo" src="https://static01.nyt.com/images/2020/04/18/obituaries/14Conway1/14Conway1-mediumSquareAt3X-v2.jpg">
<figcaption>J.H.Conway holding a model of polyhedron</figcaption>
</figure>
</main>
</html>

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

How to incorporate text into the white circle object using three.js

View the current state of my project on this JS Fiddle. I am looking to incorporate rotating text, whether in 3D or 2D. The text should rotate in sync with the white circle. I am open to any method that achieves the desired outcome. Below is the provided c ...

javascriptjquerycssthree.jstexture-mapping

Integrate an input field with a copy function similar to the GitHub clone view

Can anyone help me create a view with a tooltip similar to the one on Github? You can see the example here: https://i.sstatic.net/iBSof.png I attempted to use CSS but couldn't quite replicate the exact UI. Here is my current CSS code: [tooltip] { ...

javascripthtmlcss

Activate Input by Clicking on Label in Internet Explorer version 8

I am trying to implement a widget in JQuery colorbox that allows users to load files. My approach involves using an input tag with type='file' and styling it with visibility:hidden. Additionally, I have created two labels that are styled like but ...

javascriptjqueryhtmlcssinternet-explorer-8

Conceal the div once it reaches the top of the webpage

Is there a way to hide an "h1" element when its parent div reaches the top of the page and then show it again when it moves down using both JQuery and CSS? I attempted to utilize a scroll listener in JQuery to toggle a class, but this resulted in the "h1" ...

jqueryhtmlcss

Expanding SVG width upon import through Icomoon

After exporting an SVG file from Illustrator (already "Fit to selected Art"), I encountered an error while importing it via the Icomoon App. Strangely, other SVGs are importing correctly. I would appreciate any help or insight you can provide. Thank you i ...

htmlcsssvgiconsfont-face

Transitioning the image from one point to another

I am currently working on a unique single-page website and I have been experimenting with creating dynamic background animations that change as the user scrolls. Imagine my website is divided into four different sections, each with its own distinct backgro ...

javascriptjquerycss

How can I create a navigation bar with a search bar and a dropdown button using Material

Hello, excited to be posting my third question on SO after lurking for like 7 years. Currently, I am working with the Materialize framework and trying to design a search navigation bar with a vertical dropdown on the right side. This is how my code looks: ...

htmlcssnavmaterialize

Navigate to a different web page within the body tag without changing the current URL by utilizing a hash symbol

I am working with two HTML files, index.html and about.html. My goal is to display the content of about.html within my index.html without navigating away from it. After observing many websites, I noticed that they often use #about in their URLs to dynamic ...

javascriptphphtmlcss

Automatically move to the latest message as soon as it is posted

After trying multiple codes and encountering issues, I am attempting to add my message in a textarea that will automatically scroll down. Even though I have my own codes, they don't seem to work properly. I also tried using the code provided Here. ED ...

javascriptjqueryhtmlajax

How can you incorporate a tag at the end of an HTML link, such as edit.php?id=0, to retrieve the value 0 as a variable in PHP?

Recently, I created a page that prints data from a SQL server. In addition, I developed an edit page (edit.php) where users can modify individual lines by entering new information into a textbox and submitting it for updating in the database. My current o ...

phphtmlmysql

variance in efficiency when retrieving a DOM element

While this may not make much of a difference for smaller, simpler DOM elements, the performance impact could be significant when dealing with larger, more complex ones. Is there a noticeable performance gap between storing an element in a variable and cons ...

javascriptjqueryhtmldom

Is it possible to insert an image as the background of a specific word within a paragraph?

I am looking to enhance certain words in a paragraph by adding a brushstroke image in the background, similar to this example: https://i.sstatic.net/KzjGn.png. I attempted to use a simple background for a span, but the image exceeded the padding and was cu ...

cssimagetexthighlight

Adjust the Division's Width to be 20% of the Total Page Width Excluding Margins

https://i.sstatic.net/T0nKq.png I need to create a menu page with 5 equal columns, but I'm facing an issue with the layout. Here's my current CSS for the yellow divs: width:20%; height:100vh; background-color: yellow; display:inline-block; In ...

htmlcss

Numerous categories housed within various div containers

I am working with an HTML code that contains 6 different div elements: <div class="hisclass1 hisclass2 myclass hisclass3"> <div class="herclass1 herclass2"> <!-- 2nd div --> </div> </di ...

htmlcss

Using jQuery to target a specific item from a retrieved list of elements

I'm currently working on a photo gallery feature that is reminiscent of Instagram or Facebook user photos. My goal is to enable users to view details about each image (such as the date) in a box that appears over the image when they hover over it. E ...

javascriptphpjqueryhtml

A step-by-step guide on how to implement a window scroll-controlled color transition

I've implemented jQuery code to change the opacity of my navbar's background as the user scrolls, transitioning from transparent to blue. Here's the snippet: $(window).scroll(function(){ var range = $(this).scrollTop(); var limit = 45 ...

javascriptjqueryhtmlcssscrolltop

Tips for adjusting alignment in MaterializeWould you like to change the alignment

I have implemented the Materialize framework for my front-end design. Initially, everything looks good when the page loads, but upon returning to the index, there is an alignment issue. Clearing the cookies seems to fix it. Here is how it currently looks: ...

phphtmlcsscodeigniter

How can you prevent an element from overflowing when employing window.pageYOffset and using a switch case to alter the background color at specified pixel thresholds?

I want the <body> element's background-color to change every 500px as I scroll down. I've scoured the web for answers, but still can't figure out what's going wrong. Please review the code. However, Firefox Browser indicates that ...

javascripthtmlcss

Navigating with the keys is disabled until an item is chosen

Currently working on a Shopify website for a client and encountered an issue where the keys don't scroll down upon page load unless a specific element is clicked or tab is used. I am not sure what caused this unexpected behavior, it may have occurred ...

javascriptcssvue.jsshopify

Looking to transform an HTML table into a stylish CSS layout complete with a form submission button?

Recently, I've been delving into the world of CSS and PHP as I work on converting old code entirely into HTML and PHP with a touch of CSS. The visual aspect seems fine, but I've hit a roadblock with the submit form due to an IF statement in PHP. ...

javascriptphpjqueryhtmlcss