Spacing between several iframes

I have multiple iframes on my page and I need the first one to scale properly. However, when I try to do this by visiting this link, I encounter a white space or gap between the first and second iframes after scaling. I want to ensure that there is always a 20px space between the first and second iframes, even during scaling.

 #slider {
          width: 100%;
        }
<iframe id="iframe" style="margin-top: 10px;" src="1.html" frameborder="0" width="100%" height="200px">
 </iframe>
 <iframe id="iframe" style="margin-top: 10px;" src="2.html" frameborder="0" width="100%">
 </iframe>

Please assist me with this issue. I am a graphic designer and struggling to fix this problem :(

htmlcssiframe

Answer №1

https://i.sstatic.net/123xyz.pngInitially, it is essential to remember that IDs should be unique, as explained in the article on IDs and Classes: https://example.com/difference-between-id-and-class/ Instead of using IDs, consider utilizing classes like iframe1 and iframe2, where iframe1 can have a margin-bottom: 10px while iframe2 has a margin-top: 10px. Alternatively, only apply margin-bottom: 20px to iframe1...

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

Mobile page sliding mechanism

My website contains a div that is mostly off the page, but on hover it translates onto the main page. You can check out my website. However, this method doesn't work well on mobile devices. Hovering is not effective and I often have to click multipl ...

javascriptjquerycsshtml

Optimizing javascript for CSS style modifications

I am currently using pure JavaScript for animations without relying on jQuery or any other framework. I'm wondering what the most optimized approach is: Should I create classes for transitions in CSS like below? CSS class: .all-div-has-this-clas ...

javascripthtmlcsscss-animations

Modify the appearance of selectInput and numericInput controls

Looking to update the appearance of my Shiny UI elements to better match the overall website design. Specifically, I want to eliminate the rounded edges on the selectInput boxes for a cleaner look like this: https://i.sstatic.net/pepak.png Additionally, ...

javascripthtmlcssrshiny

What is the process for adjusting settings through selected options in a pop-up menu?

Here are the choices available: <form> <select id="poSelect" > <option selected disabled>Choose here</option> <option id="buyeroption" value="100101">I am a Buyer</option> ...

javascriptjqueryhtmlcss

"Step-by-step guide to building a webgrid or table to organize and display your

These are the HTML codes I have created: <table> <tr> <td><label style="text-align:left">Product Code:</label></td> <td><input type="text" id="productCode" value="" /> </td> </tr> & ...

javascripthtml

What is the best way to make a HTML link stand out by adding blinking superscript text using a custom blink effect?

Can you please help me with a code snippet to emphasize an html link by adding superscript text "new" surrounded by a circle or star symbol? I would like the "New" text in superscript to blink as well, drawing attention from users. Here is the HTML code s ...

javascriptjqueryhtmlcsshyperlink

Guide to implementing a dynamic background image in an angular 4 component

My inquiry is quite straightforward - I am currently in the process of developing an Angular 4 application and I require assistance with setting an image as the background for my Home component, filling the entire browser window exclusively within that com ...

htmlcssangular

Update the database with the new values and display them in an HTML table

I am working with a table that looks like the one below: <script> $("#edit").hide(); // Initially hide the edit table $("#update").click(function() { $("#edit").toggle(); $("#shown").toggle(); ...

javascriptphpjqueryhtmlajax

How can I use jQuery to set up form validation for an input textfield?

Check out this code snippet: <form data-test="loginForm-container" novalidate="" method="POST" enctype="multipart/form-data"> <div class="css-o5d3v1 e1ovefus2"> <div data-test="guestForm-email-wrapper" class="e1ovefus1 css-yjv4po e1eu3s ...

javascriptjqueryhtml

To retrieve the first td element by clicking a button within the corresponding row using JQuery

This may seem like a straightforward inquiry, but despite my best efforts, I have been unable to find a solution. I am looking to create a function that will allow me to click a button located in the 3rd td element and display the text from the first td e ...

javascriptjqueryhtml

Instructions for integrating AJAX into a PHP script

I am looking to incorporate AJAX into my PHP file so that when I delete an item from a list, the data automatically reloads and the list is updated with the new information. I have created a list of all my data along with a delete button. Below is the PH ...

phphtmlajax

Placing a freshly created item into a designated array while ensuring it is positioned at Index Value [0] rather than at [arr.length-1]

I understand that it is usually recommended to add new objects at the end of an existing array without a name. However, I am interested in exploring a more complex scenario in order to learn. Specifically, I would like to add a new object at index [0] inst ...

phphtmlarraysjson

Is there a way to make this hamburger menu change into an "x" when clicked?

After trying numerous CSS and jQuery techniques without success, I am struggling to transform my hamburger menu into an X shape. Despite my efforts with rotating the lines using CSS or trying jQuery methods, I can't seem to get it right. The menu does ...

jqueryhtmlcss

Customize the appearance of radio buttons with unique colored outer and inner circles

I am in need of creating a MUI radio button that features a unique outer ring color compared to the selected inner fill color. Although I have reviewed the official documentation, it appears that customization options only allow for changing the color as ...

cssreactjsmaterial-uiradio-button

What is the best way to position a button directly to the right of a text box with no space in

Is there a way to perfectly align a submit button to the right of a text or search box, matching the height of the search box, and eliminating any unwanted white space between them? This is my current setup: <input type="text" value="" placehold ...

htmlcsslayout

SwitchClass or AppendClass are not compatible with input tags

I am having trouble changing the border color of an input element using jQuery. Here is the setup: <input id="box" type="text" /> And the CSS class I am trying to toggle: .box-change { border-color:#ffffff; } Below is the jQuery code I am usi ...

javascriptjquerycss

Identify when a browser tab is closed and determine which specific tab out of all the open tabs was closed

Is there a way to identify when a browser or tab is closed in Angular/JavaScript? I would like to know if there are specific events that can be used for detecting these actions. Any advice, information, or code examples on this topic would be greatly app ...

javascripthtmlcssangular

iTextSharp rendering HTML to PDF in a unique way compared to browsers

I'm currently working on converting an HTML invoice to a PDF within my application, but I'm running into issues where the resulting PDF appears different from how the page displays in various browsers like IE, Chrome, and Firefox. Does anyone ha ...

c#htmlpdfitext

What is the best way to have a form open upwards when hovered over or clicked on?

Attempting to create a button in the bottom right corner that will reveal a form when clicked or hovered over. The form should slide open slowly and close after clicking on login, but currently the button is moving down as the form opens. The button also ...

javascriptjqueryhtmlcss

What is the best approach to ensure mobile responsiveness and properly space the TV show div?

How can I center the searched images of shows and add spacing below each image? The 12-column grid is not behaving properly and the images are aligned correctly on desktop but not on mobile. Any suggestions on how to fix this using CSS and Bootstrap? The g ...

javascriptcssbootstrap-4responsive-designresponsive