What causes my images to diminish in size when I apply a margin-left or float them to the left?

I'm having trouble with the CSS for my social media bar. I want it to appear on the right side of my page, but whenever I try using margin or float properties, the images end up becoming really small.

.facebook {
  width: 72.8%;
  height: auto;
  margin-left: -9%;
  margin-top: 14%;
}

.insta,
.twitter {
  width: 49.2%;
  height: auto;
}

.social {
  list-style-type: none;
  position: fixed;
  margin-left: 95%;
}
<div class="social">
  <a href="#"><img src="https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png" class="facebook" alt="Facebook Logo"></a>
</div> <br> <br> <br> <br>
<div class="social">
  <a href="#"><img src="https://www.freeiconspng.com/uploads/-van-nederland-elgie-gaat-haar-ontwikkeling-posten-op-twitter-24.png" class="twitter" alt="Twitter Logo"></a>
</div> <br> <br> <br>
<div class="social">
  <a href="#"><img src="https://midflokkurinn.is/wp-content/uploads/2017/11/250ig.png" class="insta" alt="Instagram Logo"></a>
</div>

htmlcssimagemargin

Answer №1

The main parent container has set dimensions for width and height. When you apply margins to its child elements, it reduces the available space within the parent container.

For instance, if you assign a height of 50px to an element with a margin of 30px, it will only have (50px - 30px) = 20px of actual space to occupy.

It's advisable to define specific heights for images, as shown below:

.facebook, .insta, ,twitter { 
   height: 50px;
   width: 50px;
}

Once the height is set, you can add margins as needed without impacting the overall layout.

Answer №2

It's important to enclose these icons in a container and adjust the positioning there. Simply using a 95% left margin for spacing won't give you the desired outcome. Make sure your anchor tags are set to display as block elements, and ensure consistent dimensions for your images. Avoid using
tags for spacing, as it can become problematic when making adjustments, especially for mobile views. It's better to use padding or margins instead. Below is an example of how you can structure your code:

#social-container {
  position: fixed;
  top: 10px;
  right: 0px;
  width: 20px;
}

.social {
  display: block;
  margin-bottom: 10px;
}

.social:last-child {
  margin-bottom: 0px;
}

.social a {
  display: block;
}

.social img {
  display: block;
  width: 20px;
  height: 20px;
}
<div id="social-container">
  <div class="social">
    <a href="#">
      <img src="https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png" class="facebook" alt="Facebook Logo">
    </a>
  </div>
  <div class="social">
    <a href="#">
      <img src="https://www.freeiconspng.com/uploads/-van-nederland-elgie-gaat-haar-ontwikkeling-posten-op-twitter-24.png" class="twitter" alt="Twitter Logo">
    </a>
  </div>
  <div class="social">
    <a href="#">
      <img src="https://midflokkurinn.is/wp-content/uploads/2017/11/250ig.png" class="insta" alt="Instagram Logo">
    </a>
  </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

Personalize the color and icon of the checkbox marks in sapui5

I'm trying to customize the color of the tick on a UI5 checkbox. After inspecting the CSS, I noticed that it can be modified using the ::before selector: https://i.sstatic.net/2IMc4.png To target the checkbox, I added a class called .accept and defi ...

csscheckboxsapui5

WebSlides experiencing toolbar misalignment issues while embedding Bokeh visualizations

My goal is to integrate Bokeh plots into portable html slideshows using WebSlides (unlike Reveal.js, which doesn't meet my requirements). Below is a visual representation of the issue I am encountering, with the toolbar appearing misaligned: https:/ ...

htmlcssbokeh

The automatic width feature in Firefox is malfunctioning and not behaving as expected

Here is my question: I have an image wrapped in a div (.indexWrap): <div id = "slider"> <div class="indexWrap"> <img class="indexImage" src=""> </div> ...

htmlcss

I have configured my CSS styles in the module.css file of my Next.js application, but unfortunately, they are not being applied

I recently developed a nextjs with electron template application: Here is the link to my code on CodeSandbox: https://codesandbox.io/s/sx6qfm In my code, I have defined CSS classes in VscodeLayout.module.css: .container { width: '100%'; he ...

cssreactjsnext.js

Adding a border around the `<tr>` elements in a table

How can I add a border to the <tr> element (t_border), without the inner table inheriting the style from the outer one? <table> <tr> <td>A</td> </tr> <tr> <td> <ta ...

htmlcss

Obtain span value using a CSS selector in Python

I need help extracting the value of a span using a CSS selector soup = BeautifulSoup("<body><main><div class='rentalprice'><span>3.000</span></div></main></body>") pagecontent = soup.find( ...

pythonhtmlcss

Personalizing the pop-up window using window.open

When clicking a hyperlink on a page, I need to open multiple pop-up windows. To achieve this, I must use the Window.open function instead of showModalDialog. However, I have noticed that the appearance is not satisfactory when using Window.open. (Essentia ...

javascriptcss

Assist the floats to "ascend" and occupy the available space

The screenshot showcases boxes that have been styled with "float: left". Is there a way to make these boxes float to the first available space in a column? For example, can we move the Music Nation box to the location indicated by the red arrow in the ima ...

csscss-float

Creating a loading mask for a section of a webpage using angularjs

How can I implement a loading mask/image for a $http request that loads data for a <select> tag on my webpage? I want the loading mask/image to only cover the specific section of the page where the data is being loaded. Here's the HTML code: & ...

cssangularjs

deleting multiple items with checkbox selection in Angular 2

Can anyone provide the code for both the component and service to implement multiple deletion using checkboxes in Angular 2? I have only posted the HTML code, but I need assistance with the components and services as well. The current code allows single ...

htmlangular

The PHP file fails to load JavaScript because it requires another JavaScript file to be loaded beforehand

I created a chat widget using PHP (chat.php) and now I want to embed it into another PHP page (blank.php). To make this work, chat.php requires some scripts that are located in external JavaScript files. So, in blank.php, I added the necessary JS files th ...

javascriptphpjqueryhtml

Using AngularJS to create a numeric input with a non-numeric model

I've encountered an error message related to an input field that is set as type "number" while the actual model is a string. The reason for this discrepancy is that my ngModel value is utilized in other areas of the application. However, for a specif ...

javascripthtmlangularjstypescript

Glyphicons are not functioning properly

I've been trying to use the bootstrap-cosmo.css v3.3.7 file which contains the glyphicon -glyphicon-duplicate .glyphicon-duplicate:before { content: "\e224"; } However, when I try to use it, the icon doesn't show up. <a class="btn btn- ...

cssasp.net

React Navigation Error: navigateTo must be used within a valid router configuration

When attempting to utilize useNavigation() from react-router-dom, I encounter the following error: Error: useNavigation must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router. NavBar src/components/NavBar.js:6 3 ...

javascripthtmlreactjsreact-router-dom

Accessing a variable from an external JavaScript file using jQuery

Can someone help me out with this issue I'm facing? I am having trouble getting a string returned to a variable in my embedded Javascript code. token.js: function token () { return "mysecretstring"; } HTML Code: <!DOCTYPE html> <h ...

javascriptjqueryhtmlgetscript

Enhancing Responsive Design with Bootstrap 5: Using Different Alignments for Div Elements on Desktop

I have a unique layout design challenge for my bootstrap 5 website template. On desktop, I want to display divs in the following order: 1st line of divs: image, text 2nd line of divs: text, image https://i.sstatic.net/cXZVU.png When it comes to mobile ...

htmlalignmentbootstrap-5

Tips for attaching a modal generated in an iFrame to the main window using Javascript or JQuery when the domains are different

I'm currently working on a solution to add a modal from an iFrame into its parent container, even though they are on different domains and violating cross-origin policies. After successfully adjusting the iFrame height using postMessage() in JavaScri ...

javascriptjqueryhtmliframe

Is it possible to retrieve elements by their ID when the ID values are constantly changing?

I'm facing an issue with accessing dynamic IDs using `getElementById`. I require this value to perform random calculations involving different elements. MY CODE <div class="col-lg-4" v-for="data in datas"> <button class="btn btn-outline-d ...

javascripthtmlvue.js

Creating a multi-tiered cascading menu in a web form: Harnessing the power of

In my form, there is a field called 'Protein Change' that includes a multi-level dropdown. Currently, when a user selects an option from the dropdown (for example, CNV->Deletion), the selection should be shown in the field. However, this funct ...

javascripthtmlcss

Resizing images for tablet devices

I am trying to show an image in an ImageView within my layout. To avoid any distortion, I am using android:scaleType = "center". While it appears fine on medium and small devices, on larger devices like 7" and 10", the image is too small and the borders a ...

androidimageimageviewtablet