Child div does not inherit margins

.search {
  margin: 10px;
}

.search::before {
  content: "";
  position: absolute;
  top: 50%;
  bottom: auto;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: url('magnifying-glass.svg');
}

input[type="search"] {
  height: 30px;
  padding-left: 30px;
  border: none;
  border-radius: 0.25rem;
  outline: none;
}

.container {
  position: relative;
  background-color: cadetblue;
}
<div class="container">
  <div class="search">
    <form>
      <input type="search" placeholder="Search...">
    </form>
  </div>
</div>

I have recently started learning css. As per my understanding, I have set a margin of 10px for my input[type="search"] element within the div.container by styling the margin property in the div.search class. However, it seems like the borders of the input element and div.container are not aligning as expected.

Could you please explain what might be causing this issue? I am particularly keen on discovering where my logic is flawed in this scenario.

cssmargin

Answer №1

Summary

.search {
  display: inline-block;
}

Explanation

The margins between the elements with classes .container and .search collapse due to the margin collapsing rules that apply to parent and child elements.

Here is an excerpt from the relevant MDN page:

Parent and first/last child

In cases where there are no borders, paddings, inline content, or block formatting context created to separate the top margin of a block from its first child's top margin; or no borders, padding, inline content, height, min-height, or max-height to segregate the bottom margin of a block from its last child, those margins will collapse causing the collapsed margin to extend beyond the parent element.

To avoid collapsing margins, you can establish a new block formatting context. One way to achieve this is by setting display: inline-block on the child element.

Example

.search {
    display: inline-block;
    margin: 10px 10px 10px 10px;
}

.search::before {
    content: "";
    position: absolute;
    top: 50%;
    bottom:auto;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background: url('magnifying-glass.svg');
}

input[type="search"] {
    height: 30px;
    padding-left: 30px;
    border: none;
    border-radius: 0.25rem;
    outline: none;
}

.container {
    position: relative;
    background-color: cadetblue;
}
<html>
    <head>
        <title>Test HTML and CSS</title>
        <script src="main.js"></script>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div class="container">
            <div class="search">
                <form>
                    <input type="search" placeholder="Search..."/>
                </form>
            </div>
        </div>
    </body>
</html>

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

Height:auto causing problem for content with varying height? Check out the demonstration on jsFiddle

Can you help me with the HTML below? I want the container to wrap around the section, content, and elements, and have element2 positioned directly next to element1. <div class="page"> <div class="container"> <div class="section" ...

htmlcss

By simply clicking a button in a React component, I aim to alter the font style of the text

function makeTextBold() { const boldText = document.querySelector('.form-control'); boldText.style.fontWeight = 'bold'; setText(boldText); } When I click the button, it redirects me to a blank page in the browser. ...

javascriptcssreactjs

Center the popover over the element

I am in the process of creating a resource map using SVGs. My goal is to display a popover in the center of the element when a user clicks on it. However, due to CSS rotation of the map, the traditional techniques such as the one mentioned here have not be ...

javascriptjqueryhtmlcss

What is the best way to retrieve the form element in JavaScript that houses a popup window?

Can someone help me with accessing the input using id="namesignup" in javascript? I have tried: console.log("Result :"+ $$('.popup-signup-email #namesignup')); document.getElementById(namesignup) But neither of them seem to be working. Is ther ...

javascripthtmlcss

How to Make Page Slide in Either Direction Based on User Click Location

Although the title of my question may not be very descriptive, I am essentially trying to implement a functionality where a page will slide right if a user clicks a link to the right of their current active link, and slide left if they click a link to the ...

javascriptjqueryhtmlcssajax

The jQuery append function does not take into account the styling applied to the div

Whenever I click the "add item" button, I want to append a new line (a text input) to the main content. This functionality is working correctly. However, the issue arises when adding the text input using jQuery. The CSS styling, including width and height ...

javascriptjqueryhtmlcss

Enhancing navbar with a dropdown menu in CSS

Is there a way to add a dropdown menu to my navigation bar and make it visible when hovered over? Any help or support would be greatly appreciated. Here is the code I have on JSFiddle: http://jsfiddle.net/nbh2e15y/2/ The CSS: #nav { background: none ...

csslistmenuhtml-lists

How to show specific information for individual items using Angular

In my current project, I am utilizing angular 7 and bootstrap 4. My goal is to display detailed information right below the selected item. The screenshot below shows where I'm currently at: https://i.sstatic.net/su9tI.jpg Here is what I aim to achie ...

angularcssbootstrap-4

I am in need of setting up two rows side by side using the display

I'm trying to have two rows side by side using display grid, but I'm facing some issues. When I use the following CSS... .grid-container { display: grid; grid-template-rows: auto auto; grid-template-columns: auto; grid-column-gap: 100px;} It cre ...

htmlcssbootstrap-5

Shift the inline form towards the right within the navigation bar

I have the code located at this link. How can I align the inline form to the right? I am using Bootstrap 4 and have tried using the float-right class, but it doesn't seem to be working. Is there something I am missing here? <!DOCTYPE html> < ...

csstwitter-bootstrapbootstrap-4

Vuetify vueJS dialog with elevated design

Is there a way to completely remove the elevation of a v-dialog so that it has no shadow at all? The elevation property in the v-dialog itself and using the class as Class = "elevation-0" have not worked for me. Here is the link to the component ...

htmlcssvue.jssassvuetify.js

HTML Files Can Only Interpret Style Attributes Within Elements

UPDATE: Just three days ago, my website looked flawless without any updates to the CSS or HTML. Suddenly, a few days back, I noticed that the styling of my website was completely off. It seemed like the browser decided to ignore my stylesheet and display ...

htmlcss

Troubleshooting Issue with Jssor Slider in Internet Explorer 11 due to Relative Dimensions

Encountering an issue with the relative dimensions of the slider container in IE11 (Jssor 18.0). Here is the HTML structure: An outer div with specified absolute dimensions (width and height in pixels). An inner div, serving as the slider's contain ...

htmlcssjssor

Ensuring Uniform Column Height in Bootstrap 4 - Preventing Buttons from Being Forced to the Bottom of

Using the Bootstrap 4 class 'h-100' to ensure equal height for all three columns, I encountered an issue where the buttons that were initially aligned to the bottom of each div are no longer in correct alignment. How can I maintain button alignme ...

htmltwitter-bootstrapcssbootstrap-4

Customize the Underline Color in MaterialUI Select Component

I'm experimenting with MaterialUI and trying to figure out how to customize the underline and text color of the Select component when an item is selected. Currently, the underline and label appear blue after selection with a gray background. Is there ...

cssreactjsmaterial-ui

Leveraging ng-class for selectively applying CSS3 animations based on conditions

When specific conditions are met in my controller, I apply two CSS3 animations to the DOM using ng-class. The animations (shake Y & shake X) are added based on certain criteria being satisfied. Here is a snippet of the relevant JavaScript code: $scope.sub ...

javascriptangularjscssanimation

Implementing mouse hover functionality for fieldset in EXTJS

I am looking to enhance the following code snippet by adding a mouse hover event that changes the background color of the fieldset item and displays an image next to it. Can someone assist me with this modification? var mainGroup = { ...

javascriptcssextjsmouseover

Modify the appearance of the notification bar

I successfully integrated a notification bar using the npm package ngx-notification-bar https://i.sstatic.net/MVrwu.png Within the app.component.ts file, I have included the following code snippet: this.notificationBarService.create({ message: 'Free ...

cssangular

Utilizing variable references in an SCSS root file when importing from a module file

My SCSS skills are still in the early stages, as I'm currently diving into the basics. I'm curious to know whether it's possible to access variables and mixins from a parent file in a child module. To better explain, here's an example: ...

htmlcsssass

Showcasing the Characteristics of Products in a Table on Prestashop

Dealing with PrestaShop. I have configured attributes for a product and I want to showcase them in a table format similar to this example: The table should display the Paper Size across the top, with each row representing the quantity of paper. In my ad ...

phphtmlcssprestashopprestashop-1.5