incorrect application of margin and padding

Check out my HTML & CSS code. I'm facing an issue with the top padding, which should be 20px but is currently set at 10px. Here's a screenshot showing the problem.

I've attempted to adjust margins and padding on different elements, but nothing seems to resolve the issue. Can anyone identify the cause of this problem and suggest a solution?

@import 'https://fonts.googleapis.com/css?family=Roboto:300,900'; /* font-family: 'Roboto', sans-serif; */

html, body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background: #ffffff; }

img { width: 100%; display: block; }

.block { color: #fff; font-size: 18px; background: #444444; text-align: center; padding: 10px 0px; } /* padding inside col */

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.wrap { width: 75%; margin: 0 auto; background: transparent; padding: 10px;} /* padding surrounding grid */

.grid { width: 100%; }

.grid:after { clear: both; content: ""; display: table; }

.row { padding: 0px 0; background: transparent; }

.col-1-4 { width: 25%; }
.col-1-2 { width: 50%; }
.col-3-4 { width: 75%; }
.col-1-1 { width: 100%; }

.col-1-5 { width: 20%; }

[class*='col'] { float: left; padding: 10px; } // padding between cols & rows

.gallery-grid { margin: 0; padding: 0; list-style: none; position: relative; width: 100%; }
.gallery-grid li { position: relative; float: left; overflow: hidden; width: 16.6666667%; width: -webkit-calc(100% / 6); width: calc(100% / 6); }

@media (max-width: 768px) { [class*='grid'] { width: 100%; } [class*='col'] { width: 100%; padding: 10px 20px;} }
@media (max-width: 768px) { .gallery-grid li { width: 33.3333333%; width: -webkit-calc(100% / 3); width: calc(100% / 3); } }
<!DOCTYPE html>

<html lang="en-US">
 
<head>

    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles/siimple.css">

</head>

<body>

<div class="row">
<div class="wrap">
<div class="grid">
<div class="col-1-4"><div class="block">1-4</div></div>
<div class="col-1-4"><div class="block">1-4</div></div>
<div class="col-1-4"><div class="block">1-4</div></div>
<div class="col-1-4"><div class="block">1-4</div></div>
<div class="col-1-2"><div class="block">1-2</div></div>
<div class="col-1-2"><div class="block">1-2</div></div>
</div>
</div>
</div>
<div class="row">
<ul class="gallery-grid">
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
</ul>
</div>
<div class="row">
<div class="wrap">
<div class="grid">
<div class="col-1-1"><div class="block">1-1</div></div>
<div class="col-1-5"><div class="block">1-5</div></div>
<div class="col-1-5"><div class="block">1-5</div></div>
<div class="col-1-5"><div class="block">1-5</div></div>
<div class="col-1-5"><div class="block">1-5</div></div>
<div class="col-1-5"><div class="block">1-5</div></div>
</div>
</div>
</div>

</body>

</html>

htmlcss

Answer №1

Make sure to make this simple update

.col-1-1 { width: 100%; padding-top: 20px !important; }

In your current code, there is a 10px padding around the columns, resulting in a total of 20px padding between two columns.

Alternatively, you can place the rule for .col-1-1 after your col* rule to avoid using !important.

Answer №2

Consider incorporating a clear:both style after each row

@import 'https://fonts.googleapis.com/css?family=Roboto:300,900'; /* font-family: 'Roboto', sans-serif; */

html, body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background: #ffffff; }

img { width: 100%; display: block; }

.block { color: #fff; font-size: 18px; background: #444444; text-align: center; padding: 10px 0px; } /* padding inside col */

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.wrap { width: 75%; margin: 0 auto; background: transparent; padding: 10px;} /* padding surrounding grid */

.grid { width: 100%; }

.grid:after { clear: both; content: ""; display: table; }

.row { padding: 0px 0; background: transparent; }

.col-1-4 { width: 25%; }
.col-1-2 { width: 50%; }
.col-3-4 { width: 75%; }
.col-1-1 { width: 100%; }

.col-1-5 { width: 20%; }

[class*='col'] { float: left; padding: 10px; } /* padding between cols & rows */

.gallery-grid { margin: 0; padding: 0; list-style: none; position: relative; width: 100%; }
.gallery-grid li { position: relative; float: left; overflow: hidden; width: 16.6666667%; width: -webkit-calc(100% / 6); width: calc(100% / 6); }

@media (max-width: 768px) { [class*='grid'] { width: 100%; } [class*='col'] { width: 100%; padding: 10px 20px;} }
@media (max-width: 768px) { .gallery-grid li { width: 33.3333333%; width: -webkit-calc(100% / 3); width: calc(100% / 3); } }
<!DOCTYPE html>

<html lang="en-US">
 
<head>

    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles/siimple.css">

</head>

<body>

<div class="row">
<div class="wrap">
<div class="grid">
<div class="col-1-4"><div class="block">1-4</div></div>
<div class="col-1-4"><div class="block">1-4</div></div>
<div class="col-1-4"><div class="block">1-4</div></div>
<div class="col-1-4"><div class="block">1-4</div></div>
<div class="col-1-2"><div class="block">1-2</div></div>
<div class="col-1-2"><div class="block">1-2</div></div>
</div>
</div>
</div>
<div class="row">
<ul class="gallery-grid">
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
</ul>
</div>
  <div style="clear:both;"></div>
<div class="row">
<div class="wrap">
<div class="grid">
<div class="col-1-1"><div class="block">1-1</div></div>
<div class="col-1-5"><div class="block">1-5</div></div>
<div class="col-1-5"><div class="block">1-5</div></div>
<div class="col-1-5"><div class="block">1-5</div></div>
<div class="col-1-5"><div class="block">1-5</div></div>
<div class="col-1-5"><div class="block">1-5</div></div>
</div>
</div>
</div>

</body>

</html>

Answer №3

Within your CSS file, towards the end you'll find a media query dictating the padding settings:

padding: 10px 20px;

This translates to: "Vertical padding = 10px, horizontal padding = 20px"

If you wish to have 20px of padding on the top instead, replace it with this code:

padding: 20px 10px 20px 20px;

Don't forget to make the adjustment on the code located seven lines from the end as well:

[class*='col'] { float: left; padding: 10px; }

/* Update it like this - feel free to customize */
[class*='col'] { float: left; padding: 20px 10px 10px 10px; }

Tips for advancing in your CSS endeavors

In future situations like these, remember that using your browser's devtools can be incredibly helpful for debugging CSS issues. In browsers like Chrome (and Firefox and possibly IE), simply right-click and select 'inspect'. If you're keen on learning more, seek out tutorials on utilizing your browser's developer tools.

Answer №4

The reason for the issue is that the gallery-grid element in your CSS is larger than the containing element, which is the "row". As a result, it is overflowing outside of the container.

To solve this problem, you can use a clearfix hack:

Simply add a .clearfix class to all rows and define it as follows:

.clearfix {
  overflow: auto;
}

By doing this, the problem should be resolved.

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

Managing image alignment in flexbox containers with nested rows and columns

In the following design demonstration, there are three blocks to explore. Block 1: Consists of three columns. The middle column contains two rows, both set to flex:1. Block 2: Also has three columns. The middle column includes two rows, but with a unique ...

htmlcssflexbox

How can I adjust the regular font size within a paragraph or link using bootstrap?

Looking at the fs-* classes can be very helpful, you can find them here: https://i.sstatic.net/l1Y22.png The issue I'm facing is that these classes only work for h1 to h6 headings, and not for smaller text. For example, I am unable to adjust the fo ...

htmlcsstwitter-bootstrapbootstrap-5

Using various alignment options for images on mobile devices

I've designed a theme with two columns, one for text and the other for images. I've structured it in HTML to display as: Text - Img Img - Text Text - Img Img - Text Text - Img Img - Text However, for mobile responsiveness, I want it to display ...

wordpresscsswordpress-theming

Having difficulty retrieving the selected element with Select2 jQuery

Currently developing an HTML5 template known as Londinium - responsive bootstrap 3 admin template In my dropdown menu, I have three items. When the user clicks on Owned, I am trying to display the hidden div cown, but it is not showing up. The drop-down ...

jquerycsstwitter-bootstrap

Monitoring user clicks using JavaScript code implemented

Currently, I am utilizing a JavaScript file to load on certain pages in order to track various events. Within this JavaScript file, there is a collection of selectors that have listeners attached to them. When these selectors are clicked, the tracking AP ...

javascripthtml

How to completely color a div in CSS

<h:head> <title>Unique Title</title> <style> .top{ margin: 0; padding: 0; background-color: blue; height: 15px; width: max-content; } </style ...

htmlcss

In JavaScript, what is the best way to target the initial option element in HTML?

As a newcomer to javascript, I'm wondering how to target the first option in the HTML <option value="">Choose an image...</option> without altering the HTML itself? My thought is: memeForm.getElementById('meme-image').getElement ...

javascripthtml

The steps to implement an onchange function for displaying image previews in a profile image tag

Within my code, there is a profile image tag along with an input tag for updating the image. I aim to implement a functionality that allows me to select a new image and automatically update the profile picture when it changes <div class="col-sm-6"> ...

javascriptphphtml

How can I remove a dynamically added <tr> element using jQuery?

I insert the <tr> into the <tbody> for (var i = 0 ;i < 12 ;i++){ $(`<tr><td>test</td></tr>`).appendTo('#songsTbody'); } within this HTML structure. <tbody id="songsTbody"> </tbody> ...

javascripthtmljquery

Having trouble with the Bootstrap 5 modal in the initial template?

I'm encountering an issue with setting up a basic modal using the Bootstrap 5 starter template paired with the Bootstrap Bundle including Popper. Despite reviewing similar problems on other platforms, none of the solutions seem to resolve my specific ...

htmlbootstrap-modalbootstrap-5

What is the method for integrating an element into a different flow using the position property?

How can I solve the following issue: I am working with a carousel markup that has the same HTML structure as shown below. <div> // Contains the carousel slide <div> <ul> <li><img src={....} /></li> <li ...

csssassscss-mixinssplidejsscss-functions

Display only the highest image in the picture carousel using Jquery

My goal is to create a simple image slider using HTML, CSS, and Jquery. However, when I try to move it left by 750px, only the topmost image moves and the rest of the images are not displayed. It seems like all the images are moving at once instead of jus ...

jqueryhtmlcss

Class-driven dynamic CSS

Recently, I came across a JSP code snippet that looks like this: <table id="mytable" cellspacing="0"> <tr data-depth="0" class="collapse level0"> <td></td> <td></td> <td></td> </tr> ////... /...// < ...

htmlcssjsp

Ways to Customize <td> Elements Within a <table> Container

Currently, I am utilizing jsp along with css to style the <td> within the <table> tag. My desired code format is shown below: https://i.sstatic.net/WJjA8.png However, what I am currently receiving is: https://i.sstatic.net/bLyvd.png #beng ...

htmlcss

Tips for concealing the browser's scroll bar on a designated webpage

Is there a way to hide the browser scrollbar on just one page of a website without affecting other pages? I have only been able to hide the scrollbar using body::-webkit-scrollbar { display: none; } However, this code hides the scrollbar for the enti ...

htmlcssvue.js

Modify PHP script to extract the Document Object Model (DOM) from a specified URL

Hey there, I'm currently using this code to extract and display the HREFs of all "A" tags from a URL. However, my output includes the entire link when I only want the name portion after http://twitter.com/namehere So, I'm looking to clean up my ...

phphtml

Retrieving an Instance of Google Maps Object with the Help of JQuery

I'm currently working on a script that, when executed, will retrieve an instance of a Google Maps object from the webpage using JQuery. For example, if there is a map present on the page, it will be structured like this: <div class="map">....& ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

What is the best way to adjust a <textarea> to fit a multi-column layout?

Here's a cool way to display text in columns: <div class="content-box" style="column-width: 8em"> <p>blah blah...</p> <p>blah blah...</p> <p>blah blah...</p> </div> However, when it comes to the ...

htmlformscssfrontend

What could be causing the tooltip to not function properly with data-html="true"?

I am having trouble with customizing a tooltip. The data-html="true" attribute is not working as expected, and I can't seem to figure out what the issue is. .tooltip-custom { display: inline; position: relative; } ...

javascripthtmljquerybootstrap-4

Angular 2: Dealing with Missing Image Loading

When viewing an HTML file containing the following code: <div> <img src="New-Google-Logo.png"/> </div> The image file New-Google-Logo.png is expected to load from the same folder as the HTML file. However, after running ng s ...

htmlcssangular