Customize the border to fit the contents

In my layout, I have a simple grid consisting of 2 columns with borders and some content on the left side. Unfortunately, there is some extra space due to padding that I want to remove.

Despite trying to use box-sizing: border-box;, the issue persists.

https://i.sstatic.net/3jMEY.png

Here is the HTML:

<div class="totalContainer totalContainer__space" *ngIf="selectedMenuItem === menu[3]">
  <div class="totalContainer__text">
    <label><strong>Annual</strong> Test Test </label>
  </div>
  <div class="totalContainer__text totalContainer__result">
    <label><strong>80</strong></label>
  </div>
</div>

And here are the SCSS styles:

.totalContainer {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-top: 30px;
  border: 1px solid rgba(72, 82, 93, 0.8);
  border-radius: 12px;
  box-sizing: border-box;

  &__row {
    background-color: #E5E5E5;
  }

  &__space {
    padding: 10px 0 10px 140px;
  }

  &__text {
    font-size: 13px;
  }

  &__result {
    text-align: right;
  }
}

Answer №1

Opting for margin-left over padding:

 &amp;_space {
    padding: 10px 0 10px 10px;
    margin-left: 140px;
  }

Answer №2

I believe there may be a larger perspective that is being overlooked.

When creating a block box in CSS, we have various components:

Content box: This is where your content is shown and can be sized using properties like width and height. Padding box: Surrounding the content with white space, which can be adjusted using padding properties.

Border box: Wraps around the content and padding, allowing control over size and style using border properties.

Margin box: Acts as the outermost layer, containing the content, padding, and border with whitespace between this box and other elements. Its size can be altered with margin properties.

In essence, the border includes the padding within it, whereas the margin surrounds the entire box (content, padding, and border). I recommend consulting the box model documentation for further understanding.

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

Slanted lines HTML CSS

I am encountering an issue with my HTML and CSS coding. The design requires a zig-zag "border" at the top and bottom of the page, creating a white paper space in between. The paper needs to be positioned underneath the zig-zag borders. Currently, this is ...

Code that achieves the same functionality but does not rely on the

I utilized a tutorial to obtain the ajax code below. The tutorial referenced the library jquery.form.js. Here is the code snippet provided: function onsuccess(response,status){ $("#onsuccessmsg").html(response); alert(response); } $("# ...

Is there a more efficient method for creating HTML with coffeescript / jQuery besides using strings?

Today marks my first attempt at creating a "answer your own question" post, so I hope I am on the right track. The burning question in my mind was, "Is there a more efficient way to generate HTML with jQuery rather than using tag strings?" My goal is to c ...

What is the best way to create a dynamic text area that changes based on a dropdown selection?

I'm trying to create a feature on my form where selecting a retailer from a dropdown menu automatically generates a corresponding link next to the textbox. For example, if someone picks Best Buy, I want a link to bestbuy.com to show up immediately wit ...

Getting the dimensions of an image when clicking on a link

Trying to retrieve width and height of an image from this link. <a id="CloudThumb_id_1" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'http://www.example.com/598441_l2.jpg'" onclick="return theFunction();" href="http ...

Issue with updating Angular list reference when deleting an item

My current task involves implementing a feature that displays selected items from a hierarchical structure on the right side. slice.component.ts : import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core&a ...

Creating an Interactive Countdown Timer with JavaScript

I am currently working on a website that includes a modified version of a JavaScript countdown element. While I have been learning a lot about flex grids, I haven't delved much into block/inline-block layouts. One issue I'm facing is that when t ...

What is the best way to eliminate the excess space below the footer on a vuejs page?

I am developing a footer using vuejs along with buefy. In my implementation of App.vue below, I am encountering a white margin under the footer. // App.vue <template> <div id="app"> <main-header /> <router-view/ ...

What could be causing the fluctuation in ui-grid height as I scroll horizontally?

After using ui-grid in numerous projects without any issues, I recently encountered a strange issue when working with a large number of columns. With approximately 50 columns, as I scroll from left to right in order to view the columns that are off-screen ...

Is it possible to use an onclick function to input JavaScript values into a password entry box seamlessly?

Is there a way to input password values continuously using a JavaScript onclick function into a password field? I have two images, one 'Blue' and one 'Red', that trigger an onclick function with the following values: Blue= w3! Red= T4 ...

Varied characteristics of pseudo-classes when used with or without spacing

There seems to be an issue related to CSS pseudo-classes, specifically :last-child, but it may apply to others as well. If we consider the following simple HTML: <body> <p>Paragraph1</p> <p>Paragraph2</p> </body ...

What steps do I need to follow in order to modify a CSS style definition to create a border around

I currently have a CSS style defined as follows: [class*="col-"] { border: 1px solid #dddddd; } This particular CSS definition gives borders to all of the bootstrap grid columns on my page. However, I now want to apply borders only to the bootstrap ...

Using script tags incorrectly (JavaScript platform game)

Currently, I am working on the 'create a platform game' project as outlined in Eloquent JavaScript, and I have encountered an issue related to script tags. As per the instructions in the book, we are advised to showcase our level using: <lin ...

Creating a visually appealing background image using WordPress and PHP

Currently struggling with adjusting the width of an image that's set as a background in Wordpress. The text is perfectly centered, but the background image remains full size and I want it to match the container size... You can view the image at the t ...

Sharing information between different components in React can be done using props, context, or a

When attempting to edit by clicking, the parent information is taken instead of creating a new VI. I was able to achieve this with angular dialog but I am unsure how to do it with components. This is done using dialog: <div class="dropdown-menu-item" ...

What is the best way to include a select HTML element as an argument in an onSubmit form function call?

I am currently facing an issue where I am attempting to pass HTML elements of a form through the submit function as parameters. I have been able to successfully retrieve the nameInput element using #nameInput, but when trying to access the select element ( ...

Unable to create a responsive design for this box

I've been attempting to place text and a button inside a box, but I'm encountering issues with fitting them on medium and small screens. So far, the methods I've tried have not been successful. Below is the code I am currently using: * { ...

Creating uniform-sized cards with CSS and Bootstrap

Is there a way to ensure consistent card size across all lines? I've noticed that the cards in the second line are taller. Can we base the height of all cards on this? https://i.sstatic.net/KgZwu.png Below is the HTML code: <div class="row"&g ...

Can you explain the distinction between div and span tags?

HTML includes two main tags, div and span. I am curious about the specific functions and roles of each tag. I have experimented with both but haven't been able to identify any significant differences. Can someone provide a detailed explanation on the ...

The feature to navigate to a different section on another page is experiencing a malfunction

I'm facing an issue with my navbar setup: <ul class="dropdown-menu" role="menu"> <li><a href="/main_page#top_something">People</a></li> <li><a href="/main_page"&g ...