Issues arise with the margin-top property when used directly after an img element

What could be causing this issue?

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS"
 style="width:200px; height: 200px;"></img>

<span style="margin-top: 300px;">my text</span>

Here is the link to my jsfiddle:

http://jsfiddle.net/8sxFT/1/

I am aware that adding display: block to the span should make the margin-top work.

However, I am still facing issues. I have properly closed the img element, so why isn't it working as expected?

Your assistance on this matter would be greatly appreciated!

htmlcss

Answer №1

The span element behaves as an inline element, not a block element, which means it ignores vertical margin values.

A solution is to set the span element's display:inline-block;, allowing you to use the margin property effectively.

Take a look at this Demo on jsFiddle

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS" style="width:200px; height: 200px;"></img>
<br />
<span style="margin-top: 300px;display:inline-block;">my text</span>

Answer №2

Make sure to remember to apply the float property correctly, either left or right. Give it a try: 

<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS' style="float:left;width:200px; height: 200px;">

<span style="float:left;margin-top: 300px;">my text</span>

Remember not to close the img tag like this < /img>

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

Instructions on creating a countdown timer that reveals a hidden div once it reaches zero, remains visible for a set period, and then resets

I created a countdown timer that displays a div when the timer reaches zero. However, I am struggling with getting the timer to reset and start counting down again after displaying the div. For instance, if I set the timer for 7 days and it reaches the de ...

javascriptjqueryhtmlcsstimer

Non-responsive image in Bootstrap 4

My struggle is with making my website fully responsive. Whenever I use the img tag with a width of 100% on a large screen, the image fits perfectly, but when the window is resized, a horizontal scroll appears, creating white spaces and causing the image ...

csshtmlbootstrap-4

What steps should I take to design and implement this basic search form?

Essentially, I have a three-page setup: - One page containing all possible search results such as: 'search result 1' 'search result 2' 'search result 3' - Another page with a search form and enter button. - And finally, a res ...

phpjavascriptjqueryhtml

Choosing Angular 2 components using CSS

Within my Angular2 project, I am working with the following HTML markup: <form [formGroup]="createPasswordForm" (ngSubmit)="onClickCreatePassword(createPassword)"> I am attempting to apply CSS styling to this element, but so far have been unsuccess ...

cssangular2-forms

Missing RequestVerificationToken value when hiding HTML element using jQuery

I am encountering an issue with my ASP.NET MVC 4 form that involves checkboxes being used to show and hide certain HTML elements. When I initially visit the form page, the RequestVerificationToken value is correctly created as a hidden field. Some HTML ele ...

javascriptjqueryhtmlasp.net-mvcantiforgerytoken

Is enclosing a div around HTML5 semantic elements a good practice?

Have you ever wondered about the best way to use a div with HTML5 semantic markup? I've been pondering this question for some time and haven't found a definitive answer online. One way you could do it is like this: <div class="header-wrapper ...

csshtml

Adjust the color of an HTML table cell based on the selected value in a drop-down menu?

<!DOCTYPE html> <html> <header> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> .MRG{ background-color:#82E0AA; } .MRA{ background-color:#F5B041; } .MRR{ background-color: ...

javascripthtmlcss

Validating multiple input fields using Javascript

Initially, I must ensure that the ID and password textboxes are not empty (which is functioning correctly). Following that step, I need to verify on the same form that the ID entered in the textbox is a numeric value within the range of 3000 to 3999 (tha ...

javascripthtmlfunctionvalidation

Instructions for adding an onfocus event listener to an input field in order to dynamically change the formatting of associated labels

I'm looking to change the style of my input labels to a more fancy look by implementing the .fancyclass style when using the onfocus event on the input field. I am curious to know how this can be achieved through event listeners in Javascript? ...

javascripthtmlformseventsdom-events

JQuery Unable to Retrieve .next() Element

I am attempting to locate a method for notifying the content within a p tag that does not have a class, name, or id. It is a child of a tag titled 'question', so my initial thought was to use the .next() function. There are two p tags under the p ...

javascriptjqueryhtml

Whenever I enter a narrative into my text box, it must interact with this API

Whenever I enter a story in the text box, it should trigger this API call: The retrieved data should be displayed in the browser. Currently, the API call is not being made. All the relevant code can be found in 'searchbar.js'. Could you please ...

javascripthtmlreactjsapiredux

Step-by-step guide to creating a clickable div

Having an issue with around 200 clickable buttons on my website, all designed the same: <div> <asp:hyperlink> //or LinkButton </div> The background-style of the button is within the Div and the text of the button is in Hyperlink / LinkB ...

asp.netcsshtmlhyperlinkwebforms

Updating an element on the page without having to reload the entire page

I have implemented a functionality on my Laravel page where multiple locations can be saved. Now, I am looking to enhance this feature by allowing users to edit and update location data without refreshing the page. Below is the HTML form structure: <for ...

htmljqueryajaxlaravel

Conceal anchor tag depending on the destination URL

Is there a way to hide anchor tags that point to a specific URL? I am aware of how to do so based on the id using JavaScript: document.getElementById('someID').style.display = 'none'; <a href="#" id="someID" style="display: none"& ...

javascripthtmlanchor

Tips on transforming a table to resemble a gridview

I have a table created in HTML inside a <div> tag. Below is the code of the table: <div id="cont-lef"> <table align="center" cellpadding="5px" border="1" id="myGridStyle"> <tr> <td><p>Sunday Morning ...

htmlcsshtml-table

Is there a solution for the issue of a background image loading full-size before being resized in Javascript?

I am currently working on a project where an image is dynamically resized to fit the window using javascript. However, there is an issue where the full-size image is loaded before resizing it, causing a noticeable jump from full-size to resized version. Is ...

javascriptjqueryhtmlautoresize

Angular2+ allows users to easily drag and drop an image onto the screen, complete with

Check out this stackblitz link for more details: https://stackblitz.com/edit/angular6-ledera?file=app%2Fapp.component.ts I'm attempting to drag an image from the desktop and drop it directly onto the dropzone div. 1) Obtain a preview of the image 2) ...

javascriptangularhtmldrag-and-dropimage-upload

React application: Issue with second container not adjusting to the full height of the first container

My application consists of two containers. One container is a ReactPrismEditor, while the other is simply a container displaying text. However, I am facing an issue where the height of the second container does not adjust according to the content inside t ...

cssreactjs

The matter at hand pertains to the aesthetics of formatting HTML components

Below is my attempt at creating a search box and styling it. However, I am encountering an issue where the CSS properties applied to the box are not being rendered. I have tried including the CSS in a separate file as well as within the script itself, but ...

phphtmlcss

Do not cache anything with HTML5

I am facing an issue with caching on my website. Despite trying to avoid it, the cache.manifest file still contains entries as shown below: CACHE MANIFEST # Cache manifest version 1.1 CACHE: #nothing to cache. NETWORK: #force no cache * This configurat ...

javahtmljsptomcat