Is there a gap between the parent div and child div?

Snippet:

HTML

<body>
    <div class="wrap">
        <div class="box">???</div>
    </div>
</body>

CSS

.wrap {
    background-color: #0000FF;
    display: block;
    height: 600px;
    margin: 0px auto;
    padding: 0px;
    width: 600px;
}

.box {
    border: solid 20px #FF0000;
    color: #FFFFFF;
    display: block;
    height: 100%;
    padding: 0px;
    margin: 0px;
    text-align: center;
    width: 100%;
}

JSFiddle:
http://jsfiddle.net/5k0ddtdn/4/

I anticipate the red border to enclose entirely around the blue parent div without considering this isn't a border-box.

Why is it not behaving as expected?

htmlcssborder-box

Answer №1

To ensure proper sizing, include box-sizing: border-box; in the style definitions for .box.

.box {box-sizing: border-box;}

Visit this link

When the inner element has a width of 600px along with a 40px border, and the parent element (.wrap) totals 640px in width, adjustments need to be made to either the box model or the dimensions of the inner element (width: 560px; height: 560px;). Alternatively, you can remove the width property for the inner element and only set height: 560px;.

Explore this alternative solution here

Answer №2

Here is an example of how to update your box style:

.box {
    border: solid 20px #FF0000;
    color: #FFFFFF;
    display: block;
    height: 100%;
    padding: 0px;
    margin: 0px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

Check out the Live Demo here

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

Enclose all similar elements in a container with a flexible layout

I'm working on a flexible layout in Wordpress using Advanced Custom Fields. I need to wrap images with the class name portrait in a containing div, but only in pairs and in the same position in the dom. The challenge is that these elements can appear ...

jqueryhtmlwordpressadvanced-custom-fieldswrapall

steps to transform an image into a clickable link

I'm struggling with a simple question and need some help. #tps_block { height: 45px; width: 940px; } #tps_point1 { width: 351px; background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 0 no-repeat; text-indent ...

htmlcssimagehover

CSS gradient pointing arrow

Is there a way to create a CSS arrow with a gradient instead of a solid color? Below is the CSS I have been experimenting with: .breadcrumbDivider .arrow-right { width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid ...

htmlcssgeometrycss-shapes

What is the proper way to add a date and time into a MYSQL database using an HTML form

Dealing with the transition from "datetime" to "datetime-local" in HTML5 has unexpectedly caused some complications for me. Due to this shift, inserting datetime values into a MySQL table using an HTML form has become problematic, especially when using Car ...

phpmysqlhtmllaravelphp-carbon

OceanWP Theme with a Fixed Navigation Bar

Currently utilizing the oceanwp theme, I'm aiming to create a topbar that vanishes while scrolling and have the menu smoothly transition to the topbar location with some opacity. I attempted the following code snippet: #site-header { position: fixe ...

csswordpress

What to do when CSS seems to not be functioning properly on GitHub pages

https://github.com/Leevance-singh/tech I've been facing an issue with CSS not working on my GitHub pages. Despite searching through over 40 forums and solutions, I still can't seem to get it to work. The href is correctly pointing towards the CS ...

htmlcss

Is your sticky sidebar getting in the way of your footer?

I've developed a custom sticky sidebar for displaying ads, but I'm facing an issue. When I scroll to the bottom of the page, it overlaps with the footer. Can someone please take a look at this? - var stickySidebar = $('.sticky'); if ...

javascriptjqueryhtmlcssjoomla

The function range.insertNode() is failing to insert the text node as it should

I'm currently working on developing a Chrome extension. Essentially, I want the user to be able to insert HTML format tags before and after selected text when they click on a content menu option. These tags are added in an event page that sends the f ...

javascripthtmldomgoogle-chrome-extensioninnerhtml

Modify text by adjusting text color based on the contrast with the background color using knockout databinding

I am working with a table that contains data from my database: Here is the ViewModel structure: function alertViewModel(i) { var self = this; self.Id = ko.observable(i.Id); self.AlertType = ko.observable(i.AlertType); self.Category = ko.observab ...

cssknockout.js

PHP HTML Three-Dots Menu

I am currently working on a social networking site where I am trying to add three menu dots in the top right corner of each post made by a user. However, I am facing an issue where the dropdown menu only appears for the very first post at the top of the pa ...

phphtmlcss

The issue of the malfunctioning HTML label input tag with id functionality

Just starting out with Html/CSS. Here is my signup.html code snippet Signup.html <div class="form-floating"> <select name="phone_number_0" class="form-control" required="" id="id_phone_number_0" ...

htmllabelbootstrap-5

Adjusting Images with CSS for Custom Subreddit Design

I am currently attempting to enhance a subreddit theme by resizing an image to its actual size upon upload. The current code for the logo is: /* SUBREDDIT LOGO ADDON ----------------------*/ #header .pagename a { width: 100px; background: url(%%subreddit ...

cssimageresizeaspect-ratioreddit

Delaying CSS Keyframe animations

I'm having trouble getting the color squares in my table to appear one by one. I want each color to show up, then disappear, followed by the next color appearing and disappearing, creating a light sequence effect. Any advice or assistance would be gre ...

htmlcss

Showing a placeholder image in the absence of any image

I need help with displaying a default image when there is no uploaded image in the CMS. Here is the code I have so far: <li><img alt="" class="img-responsive" src=" <? if($artikel[0]['images'] == '' ...

phphtmlarrays

Stable header and footer remain in place even when the menu is opened

I'm encountering an issue in my Angular application where, specifically on mobile devices, the footer and header jump down by 105px when opening the sidebar menu. You can observe this behavior by accessing the app here. Interestingly, I have been unab ...

angularjshtmlcsssemantic-ui

Guide on validating a dropdown using template-driven forms in Angular 7

Having trouble validating a dropdown select box, possibly due to a CSS issue. Any suggestions on how to fix this validation problem? Check out the demo here: https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.compo ...

csstypescriptvalidationangular8

The HTML Comment Box is unable to expand its height automatically

I found a code snippet online to create a comment box in HTML. It's working fine, but as more comments are added, they start overflowing and don't stay within the designated box. I've tried using a div with overflow settings, but the issue p ...

javascripthtmlcss

Excessive scrolling issue with dropdown menu

Currently, I have a solution in place to handle scrolling very lengthy menus in my dropdowns. You can find more information about it here: http://css-tricks.com/long-dropdowns-solution/ I am wondering if there is a way to prevent the menus from continuou ...

javascriptcssmenuscrolldrop-down-menu

Ways to incorporate dropdown menus using Bootstrap

Information regarding the inquiries ........................................................................................... <!DOCTYPE html> <html lang="en" xmlns:th="https://www.thymeleaf.org"> <head> <meta charset="UTF-8"&g ...

javascripthtmlbootstrap-5

Transforming Data-Attributes into an Array Using jQuery in a Plugin: A Step-by-Step Guide

Currently, I am attempting to extract attributes from specific selection tags using the following code: $('tagName').swapper(); Each section contains data-image="source". My objective is to retrieve each of these attributes and arrange them int ...

javascriptjqueryarrayshtmljquery-plugins