Is your margin not functioning correctly? Is padding taking on the role of margin?

One issue I'm encountering is that the margin isn't behaving as expected in this example. The padding seems to be working like margin should. Why is that?

Print Screen:

https://i.stack.imgur.com/N1ojF.png

Why is it that the margin in the h3 tag inside the div element is affecting the parent div instead of the h3 itself? And why is the padding acting like the margin should? It's quite perplexing... What's going on here?

Code:

<!DOCTYPE html>
<html lang="pl">
<head>

    <meta charset="utf-8">
    <title>Philosophia Blog</title>
    <meta name="description" content="Blog about interesting publications in the field of philosophy. Discussion of selected texts from the most famous authors!">
    <meta name="keywords" content="philosophy, books, blog, reflections">
    <meta name="author" content="Mortinez Walles">
    <link rel="stylesheet" href="style.css">
    <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
</head>
<style>

#aside {
    width: 315px;
    float: left;
    min-height: 500px;
}
.abox {
    margin: 10px;
    margin-bottom: 20px;
    max-width: 279px;
}
.abox1 {
    height: auto;
    box-shadow: 3px -3px 6px 0px #000000,
    -1px 1px 1px 0px #000000;
}
.abox1-content {
    padding: 10px;
}
#photo {
    width: 80px;
    height:80px;
    float: right;
    background-image: url("zdj.png");
    background-repeat: no-repeat;
    margin: 10px;
    border: 1px solid #000000;
    box-shadow: 1px 1px 2px 0px #000000;
}
.abox2 {
    height: 300px;
    box-shadow: 3px -3px 6px 0px #000000,
    -1px 1px 1px 0px #000000;
}
.abox h3 {
    text-align: center;
    margin: 0px;
    margin-top: 70px;
}
.clear {
    clear: both;
}
</style>

<aside>
        <div id="aside">
            <div class="abox1 abox">
                <div class="abox1-content">
                    <div id="photo"></div>
                    Hi! I'm Michael. Thanks to earning money from my blog and sensible saving, I can afford a lot. I want to show you how to take care of your household budget, get out of debt, multiply savings, and secure a decent retirement for yourself.
                </div>
            <div class="more"><a href="#">More about me...</a></div>
            </div>
            <div class="abox1 abox">
                <header>
                    <h3>Download Free Materials</h3>
                </header>
                <div class="abox1-content">
                    Over 67,000 people have already signed up for my newsletter (no spam! - just information about new articles). Sign up and you will receive a set of 23 Excel calculators that will help you calculate media costs, estimate credit installments, determine your net worth, check the profitability of online currency exchange offices, learn ways to categorize expenses, and much more!
                </div>
            </div>
            <div class="abox1 abox">
            </div>
        </div>
    </aside>
</body>
</html>

Answer №1

You may be encountering a situation known as CSS collapsing margins. This phenomenon occurs when adjacent vertical block-level elements in the normal flow of a document have margins, causing the margin of the element with the larger value to take precedence while the margin of the element with the smaller value collapses to zero.

If you inspect the styling of your h3 element, you'll notice that its margin is being collapsed due to this CSS behavior. In such cases, using padding instead of margin to create space around the heading can provide a reliable solution.

padding-top: 70px on the h3 tag or on its parent div can help overcome collapsing margins. However, if you intend to add a border to your h3, it's advisable not to use padding directly on the h3 but rather apply padding to the containing header element for consistent results.

For visual reference and clarity, here is an example snippet showcasing the proposed changes:

<!DOCTYPE html>
<html lang="pl">
...
</style>

<aside>
    <div id="aside">
        ...
    </div>
</body>
</html>

Answer №2

Margin refers to the space outside of an element, while padding defines the space inside the element.

Padding affects the content layout, whereas margin controls the spacing around the element.

Perhaps this visual aid can clarify things:

https://example.com/image.png

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

PHP form headaches: issues with submitting and posting

I'm having trouble with the submit button in my PHP code. Here's what I have so far (it's for a website where users can rate things): <form method="POST> <input type="radio" name="person" value="1" /> <input type="radio" name ...

Resolution of JSP/HTML Pages

Looking for guidance on adjusting the height and width of JSP/HTML pages to accommodate various monitor resolutions. How can I ensure that my page looks good and fits properly on all types of monitors? Any tips on setting height and width in a JSP would ...

"Use jQuery to toggle the slide effect for the first element of a

Below is the HTML code snippet: <div class="row header collapse"> Content 1 <i class="fas fa-chevron-circle-up" ></i> </div> <div class="instructions-container"> <div></di ...

Latest Version of Bootstrap (v5.0.1) - Issue with Hamburger Menu not Auto-closing when Clicking on Anchor Links on

Hello fellow developers, I'm facing an issue with the hamburger menu in a responsive layout using Bootstrap v5.0.1. The problem is that the menu doesn't automatically close when clicking on anchor links within the same page, even though collapse ...

:Incorporating active hyperlinks through javascript

Hey there, I've encountered a little conundrum. I have a header.php file that contains all the header information - navigation and logo. It's super convenient because I can include this file on all my pages where needed, making editing a breeze. ...

Switching the background image of a div by clicking on a different div

To start, you can locate all of my code right here. http://jsfiddle.net/yfukm8kh/1/ The issue I'm encountering pertains to the following section. var changePic = function (direction, id, array) { var intID = parseInt(id); var intDir = pars ...

Incorporating a HTML layout with a JS backdrop

I have successfully implemented a JavaScript background and now I want to apply this background across all my PHP files. The issue is that the HTML code either overlaps with the JS content or appears behind it. How can I resolve this? Below is the JS fil ...

Having trouble changing the Font Awesome icon on click?

I'm struggling to figure out why I can't change a font awesome icon using a toggle. I've tried various solutions but nothing seems to be working. Any insights on what might be causing this issue? (HTML) <span class="toggle-icon" ...

Having trouble accessing the value of a node in JavaScript, as it keeps returning as "null"

Experimenting with converting HTML elements into lists. The objective is to generate a list of all values in a table upon clicking the "page next" buttons on it. Afterward, an alert should display the value of the first item in the list, which corresponds ...

Displaying divs in a reverse order can bring a unique perspective

I have multiple sibling divs that are styled with position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%;. These divs act as message boxes and are created by a third-party ASP.NET control, preventing me from altering their order in t ...

"Embrace the power of Bootstrap 3 with a cutting-edge logo,

Looking to design a layout that features a logo on the left and a slogan pane with the navigation bar below it on the right. Check out image #1 for reference. As the screen narrows, the plan is to have the navigation pane move below the logo and slogan. T ...

Is there a way to incorporate text fields and input in BootstrapDialog?

Is it possible to include text fields and inputs within this modal using BootstrapDialog without modifying the library? Additionally, can I use $.ajax() inside? <button class="btn btn-primary" id="add_item">New item</button> jquery $('# ...

Localhost is causing issues with Laravel in retrieving webfonts

I was trying to incorporate font-awesome into my Laravel project, but encountered a strange error. When I run the project, the following error appears in the console: GET http://localhost/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?5 ...

Guide on showcasing all entries in the database within the body section of an HTML table

Looking to showcase data from a table inside the body section of an html page This is the code I've been working on: <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi ...

A division element continually broadens to its maximum width, regardless of whether there is enough space to accommodate additional elements on the same

Whenever the browser window is resized while displaying the code provided below, I am facing an issue where the div expands to the max-width even when I do not want it to do so. When everything fits on a single line, the layout appears fine. However, upon ...

Is there a way to turn off alerts from Aspx files for HTML and CSS?

Dealing with annoying warnings in my aspx files has been a constant struggle. The "CSS Value is not defined" message pops up when I reference CSS files from different projects, causing unnecessary frustration. Even more frustrating are the warnings about i ...

IE6 is not displaying the tag styles correctly

My website has a section that shows two links next to each other. While it's displaying correctly on most browsers, it seems to have issues specifically in IE6. You can view the issue on this fiddle. Can anyone shed some light on why this is happenin ...

Angular: Oops! Encountered some template parsing issues: Surprising closing tag encountered

Recently, I created a brand new project with Angular CLI on 05/25/17. I decided to copy and paste some HTML code into a new component in the project. Surprisingly, this HTML code, which worked perfectly fine as its own standalone page, is now causing compi ...

React-tooltip and a challenge with Server-Side Rendering in Next.js

In my Next.js app, I make use of the react-tooltip library for tooltips. One peculiar issue that I have noticed is that whenever I refresh a page containing a tooltip, I encounter the following error: react-dom.development.js:88 Warning: Prop `dangerously ...

Tips for embedding HTML code within {{ }} in Django templates

I'm curious about how to incorporate HTML within {{ }}: {{ article.tags.all|join:", " }} This code snippet returns tags separated by commas, for example: sports, cricket, nature, etc. What I would like to achieve is: {{ <span class="label"&g ...