How can I prevent the content on my page from adding padding to the body of the page?

I'm working on designing a simple interface similar to Slack. However, I'm facing an issue where the left navigation is creating some padding from the body, even though I have set the padding and margin to zero.

.app {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}
.leftNav {
  border: 1px solid black;
  height: 100vh;
  padding: 20px;
  margin: 0;
}
.main {
  padding: 10px;
}
<div class="app">
      <div class="leftNav">left navigation</div>
      <div class="main">main content</div>
    </div>

css

Answer №1

The primary rule is sufficient for your needs. By setting both the margin and padding to 0, you have the freedom to adjust them as needed with ease.

* {
  padding: 0;
  margin: 0;
}

.app {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}
.leftNav {
  border: 1px solid black;
  height: 100vh;
  padding: 20px;
  margin: 0;
}
.main {
  padding: 10px;
}
<div class="app">
      <div class="leftNav">left navigation</div>
      <div class="main">main content</div>
</div>

Check out this live demo for a visual representation :)

Answer №2

It seems like you were anticipating something different, but I view these css styles as the default settings. The space you're seeing is not the app's padding or margin; rather, it's the margin between the <body> and <html> tags.

body { display: block; margin: 8px; }

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

Internet Explorer is having issues displaying CSS text accurately, particularly in relation to the background-

Having an issue with Internet Explorer not displaying my background clipped text correctly. In other browsers like Chrome and Firefox, the code renders fine: https://i.stack.imgur.com/x9lio.png However, in IE it appears differently: Your code: HTML: & ...

htmlcssinternet-explorertext

On a Samsung tablet with Moodle, the body background image is set to display at the top

Encountered an issue with Sambungs tables. I have a background image set on the body. Here is how the CSS looks: html, body{ background: url('img/background.jpg') no-repeat; background-position: top; // I also tried cover, fixed, etc } The ...

htmlcssmoodle

Adjust the text placement on the toggle switch to turn it On or Off

I am looking to create a toggle switch with a small size. I found some code on Stack Overflow that I tried but it didn't work as expected. The code snippet I attempted to use is from another helpful post. My goal is to have the "on" text align to th ...

htmlcss

Adjust the angle and trim an image on one side

Can someone assist with making an image appear like this: https://i.sstatic.net/J4DPp.jpg I'm attempting to achieve this look using CSS: https://i.sstatic.net/fuucK.png I've experimented with skewing but the red area persists, regardless of t ...

htmlcsstransform

Box Pattern with Pop-Up Modal

Check out the grid of squares I've coded below: <div class='square-container'> <div class='square'></div> <div class='square'></div> <div class='square'></div& ...

javascriptjqueryhtmlcss

What is the best way to define my background image using markup language?

I'm facing a challenge with some code that I didn't write which includes a background-image. While I want to maintain the identical appearance, I prefer to set the image in my markup rather than CSS. However, I'm unsure of how to do this. T ...

cssbootstrap-4background-image

Draggable slider not functioning properly with linear interpolation

Recently, I've been delving into the world of "linear interpolation" and its application in creating easing effects. However, while the easing functionality of the draggable slider seems to be operational, I'm encountering an issue. The slider re ...

javascripthtmlcsssliderlerp

Show the layout of the table in a visual format

I am struggling to showcase a table created using <ul> tags. I want the content to be displayed one after the other. Here is my code: CSS .activity-list-header > li { display: inline-block; text-align: left; width: 15.666%; list- ...

jqueryhtmlangularjscss

The Mystery of Bootstrap 4 Column Sequence

I was able to achieve this layout using Bootstrap 3, but I am not sure how to implement the same setup with Bootstrap 4 (4.1). My goal is to have a column displaying C beneath A, and another column displaying B. However, on mobile devices, I want all thre ...

twitter-bootstrapcssflexboxbootstrap-4

A helpful tip on how to designate a specific color to the helperText in Material UI in order to emphasize

Is there a way to customize the color of helperText in material-UI for highlighting errors in a TextField? I've been struggling to change the color of helperText with no success. I attempted using MuiFormHelperText-root-406 to add CSS styles, but it ...

cssreactjsmaterial-ui

Autofocus Styling with CSS Bootstrap

Currently, I am working on creating a grid of large buttons using React and Bootstrap. I have implemented CSS for hover and focus effects on these buttons. My main issue arises when I try to load the screen with one button already focused. I attempted to ...

cssreactjsbootstrap-4

I have a flex box with an image and text line inside. How can I adjust the width of the box and text to automatically match the size of the image?

Consider the code snippet below: <style> .img_box { display: flex; } </style> <div class=img_box> <img src=img/> <div>Title text of varying length. It may exceed the image's width or be smaller.</div> & ...

htmlcss

Using jQuery to automatically scroll to the bottom of a div when sliding down

When a user clicks on a link to slide the div down, I want it to automatically scroll to the bottom of the div. I've attempted to use scrollTo and animate methods to achieve this effect. $('html, body').animate({ scrollTop: $("#elementID") ...

javascriptjqueryhtmlcss

Tips for effectively overlaying one container on top of another in a responsive manner

There are a pair of containers. The main container functions as the parent, while the child container acts as a tag to categorize the content. The objective is to position the tag container at the top right corner of the main content container, slightly of ...

javascriptcssreactjs

Custom Jquery function is failing to position divs correctly within ajax-loaded content

I recently coded a custom function that efficiently positions absolute divs within a container by calculating top positions and heights: $.fn.gridB = function() { var o = $(this); //UPDATED from var o = $(this[0]); o.each(function() { var ...

jquerycssajaxcallbackpositioning

Mobile view div failing to fill remaining space

When viewing my website on a mobile device, the heading in the div tag is not occupying the remaining space like it does on desktop. The heading is an h4 tag inside a div tag for mobile view. If you want to check out my website in inspect mode, here is the ...

htmlcsstwitter-bootstrapbootstrap-5

Custom Native Scrollbar

Currently, there are jQuery plugins available that can transform a system's default scroll bar to resemble the iOS scroll bar. Examples of such plugins include . However, the example code for these plugins typically requires a fixed height in order to ...

javascriptjqueryhtmlcssslimscroll

Struggling with certain CSS design elements

I'm encountering some CSS styling issues. The button in my form remains perfectly positioned when I resize the window, but the inputs are moving around. Why is this happening? Also, when a button is pushed, a h2 element with a little arrow needs to b ...

htmlcss

Access in-depth data by clicking on a map to get detailed information

Recently, I took on the challenge of managing a golf club website after the original creator had to step away. One urgent issue I need to address is fixing a malfunctioning flash animation that provides information about each hole on the course. My plan is ...

javascriptcsshtmldhtml

Creating a scrolling list group in a single column that moves in sync with another longer column

When working with two columns in Bootstrap, such as col-4 and col-8, how can you ensure that a list-group stays fixed within its column and vertically aligned even when the content in the other column is scrolled down? Dealing with this responsively can b ...

htmlcsstwitter-bootstrapbootstrap-5