Topic: Margin and padding problems

Belovol pro asked 6 years ago


Good day, guys! I need help with margin and padding for col-* classes.  My steps are as follows:
  1. I take code from here.
  2. I make to files
    1. Ev_han.js with code:
    2. import React from "react";//import { render } from "react-dom";
      
      //import {Container} from 'mdbreact'
      
      //import { Button, Card, CardBody, CardImage, CardTitle, CardText, CardGroup } from 'mdbreact';
      
      //import {Row, Col} from 'mdbreact'
      
      //import {View, Mask, Animation, Fa} from 'mdbreact'
      
      const EventHandler=(props) => (
      
      <div className="container">
      
      <div className="row">
      
      <div className="col green">
      
      One of three columns
      
      </div>
      
      <div className="col green">
      
      One of three columns
      
      </div>
      
      <div className="col green">
      
      One of three columns
      
      </div>
      
      </div>
      
      </div>
      
      )
      
      export default EventHandler
    3. index.js with code:
      import 'font-awesome/css/font-awesome.min.css';
      
      import 'bootstrap-css-only/css/bootstrap.min.css'; 
      
      import 'mdbreact/dist/css/mdb.css';
      
      import React from 'react';
      
      import ReactDOM from 'react-dom'; 
      
      import { BrowserRouter as Router } from 'react-router-dom';
      
      //import registerServiceWorker from "./registerServiceWorker"
      
      //import AppPage from './AppPage';
      
      //import App from './Parall_1';
      
      //import App from './App'
      
      //import NavbarFeatures from './Navigation'
      
      //import App from './Paginator';
      
      //import BasicExample from "./Router_ex"
      
      //import App_1 from "./TestProps"
      
      //import Main from "./Main"
      
      //import MdbPro from "./MdbPro"
      
      //import EventHandler from "./Event"
      
      import EventHandler from "./Ev_han"
      
      //registerServiceWorker();
      
      ReactDOM.render(
      
      <div>
      
      {/*
      
      <Router> 
      
      <Main/>
      
      </Router>
      
      */}
      
      <EventHandler/>
      
      </div>
      
      , document.getElementById("app"));
    4. Then I get no any padding and margin, though in your example they are. Why?

Belovol pro answered 6 years ago


Thanks a lot. Exhausting answer.

Anna Morawska staff answered 6 years ago


Hi there, in fact, they have 15px padding on each side, please open developer tools in your browser to check this.  It's also easier to notice when you fill your divs with some content. Best, Ania

Mitch P free commented 6 years ago

Can't you edit the relevant CSS file instead of inline styling? Or at least, add custom CSS into a custom.css to override any default css like padding, margin, etc.,?

Anna Morawska staff commented 6 years ago

Hi, yes, of course, you can, it is for demonstration purposes only

Belovol pro answered 6 years ago


Here you write, that col class has default padding and margin definitions and, furthermore, there is special class .no-gutters to cancel this definitions. Why this definitions don’t apply in my case?  

Anna Morawska staff answered 6 years ago


Hi there, you are right, in our example there is an additional class which adds a border to those divs . It is there just to visualize better how the grid system works. If you want to recreate this effect please add a border to your columns, e.g :
<div className="col green" style={{border:"2px solid #fff"}}>
One of three columns
</div>
If you have any further question just ask here. Best, Ania

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: 4xIntel Core i7-4510U CPU @2 GHz
  • Browser: Google Chrome V- 68.0.3440.8
  • OS: openSUSE Leap 42.3
  • Provided sample code: No
  • Provided link: Yes